Question

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?

Answer 1

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.