Different function for form success and for the form validation messages

I've just been helped with some functions and callbacks to get this animation on my form once submitted:

            $("#message").show().delay(5000).fadeOut('fast', function(){
            $("#slide_panel").slideToggle("slow");
});

Though, the problem I have now is, if someone had to submit the form without entering the correct details, the error message will also pop up (pops up in the same div "message" as the thank you message), delays for 5 seconds and then closes the form.

Of course, I don't want it to close the form, instead show the error message for 5 seconds and then fadeout the error message.

Anything I need to add here:

function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('fast',function()
{$(this).remove()});
            $('#submit').removeAttr('disabled');
            if(data.match('success') != null);
            $('#name').val( "" );
            $('#email').val( "" );
            $('#phone').val( "" );
            $('#dayin').val( "" );
            $('#dayout').val( "" );
            $('#comments').val( "" );
            $('#verify').val( "" );
            $("#message").show().delay(5000).fadeOut('fast', 
function(){
            $("#slide_panel").slideToggle("slow");
});

        }
    );

    });

    return false;

});

});

I'm assuming I need to do something similar to this code:

if(data.match('success') != null);

In my contact.php form.... I have this:

if (isset($_POST['verify'])) :
    $posted_verify   = $_POST['verify'];
    $posted_verify   = md5($posted_verify);
else :
    $posted_verify = '';
endif;

// Important Variables
$session_verify = $_SESSION['verify'];

if (empty($session_verify)) $session_verify = $_COOKIE['verify'];

$error = '';

    if(trim($name) == '') {
        $error .= '<li>Your name is required.</li>';
    }

    if(trim($email) == '') {
        $error .= '<li>Your e-mail address is required.</li>';
    } elseif(!isEmail($email)) {
        $error .= '<li>You have entered an invalid e-mail address.</li>';
    }

    if(trim($phone) == '') {
        $error .= '<li>Your phone number is required.</li>';
    } elseif(!is_numeric($phone)) {
        $error .= '<li>Your phone number can only contain digits.</li>';
    }

    if(trim($comments) == '') {
        $error .= '<li>You must enter a message to send.</li>';
    }

    if($session_verify != $posted_verify) {
        $error .= '<li>The verification code you entered is incorrect. 
</li>';
    }

    if($error != '') {
        echo '<div class="error_message">Attention! Please correct the  
errors below and try again.';
        echo '<ul class="error_messages">' . $error . '</ul>';
        echo '</div>';

    } else {

    if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); }

Anything I need to do here? Or do I only need to edit the javascript file?

Answers


if you use JSON to call a function somewhere in the code behind you will be able to return a status property.

I used it aswell in my current project and here is an example of how I used it:

var link = '/brainbattleJSON/MarkAssignmentAsInProgress';
                $(this).hide();
                $.getJSON(link, { questionId: qId }, function (json) {
                   if(json.status == "ok"){
                   //do this
                   }else{
                   //do this
                   }

                });

Code behind:

// your function with validation
// if the form is valid make status "ok" otherwise put anything else
Return Json(New With {.status = "ok"});

I hope this can help you a bit :)

Edit:

You will need to change the value of var link to the path of your function where you check the form. Then where you now say if your error!='' you will send back the json. in this you will say:

return json(new with{.status = 'error', .errors = 'yourErrors'})

So for errors it might be useful to send an array just in case if you get more than 1 error on the form. All the messages will no longer be shown in php with echo but you will have to put the errors there with javascript.


I have a uploaded register and login pages(zip file) at following link: http://www.4shared.com/folder/uanQHCAg/_online.html

It uses same div to display success and error messages. You can try and implement what you are looking for, with an addition of fadeout effect.


Need Your Help

How can I execute Javascript before a JSF <h:commandLink> action is performed?

javascript jsf

If you have a JSF &lt;h:commandLink&gt; (which uses the onclick event of an &lt;a&gt; to submit the current form), how do you execute JavaScript (such as asking for delete confirmation) prior to the

new line within createTextNode

javascript jquery html

I want to create a new paragraph in a div:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.