AJAX Jquery PHP Validation of Form

Question

Having no luck with the following jQuery code. Supposed to validate form input on submit. Password set correctly. On first submit, err is true. Submit second time (password unchanged), err is correctly set to false.

        var err = true;
        $( "#signupform" ).submit(function( event ) {
            var span_supassword = $('#span_supassword');
            var password        = $("#supassword").val();
            $.ajax({
                url:        '/apps/ajax/signupvalidate.php',
                data:       'action=checkpassword&password=' + password,
                dataType:   'json',
                type:       'post',
                success:    function (j) {
                    if (j.passwordmsg) {
                        err = true;
                        span_supassword.html(j.passwordmsg);
                    }
                    else { err = false; }
                }
            });
            if (err) { event.preventDefault(); }
        });

Any ideas or suggestions?

Answer 1

You call 'async' (not synchronized = call web server and when get answer start 'success' function) query to web server and do not wait for answer! Just check 'err' variable and at first 'submit' it's as default 'err = true', when you click again submit 'err' is filled with answer from web server and it shows real value. If you test on local PC web server, it should generate answer in ~0.1 sec and then it call 'success' function!]. Very stupid solution would be:

err = null; // delete value every call
var span_supassword = $('#span_supassword');

... (jquery code) ...

while(err == null)
{// freez web browser until you get answer from server
}
if (err) { event.preventDefault(); }

but it will freez website until it get answer from web server.

---

Real jQuery solution: 1. Add 'change' event to all 'input' fields that you want to validate. 2. Every 'change' event execute AJAX to validate current field value. 3. Save validation result in variables like 'validationPasswordField = answerFromAjax' 4. in 'submit' event execute something like:

if(!validationPasswordField || !validationUsernameField || !validationAcceptedRegistrationRules)
    {
// if any validation failed (is 'false') block submit
    e.preventDefault();
    }