Jquery Ajax Validation Not Functioning On Submit

Question

Hi there, am having a little issue with Jquery and wondering if anyone could assist

I have a form, which i am validating on blur

$('form#setAdminUser :input').blur(function () {
var $item = $(this);
var $itemWrapper = $(this).parent();
$itemWrapper.find('input').removeClass('errorRow').end()
.find('span').remove();

 // There are other validation rules here I have ommitted..

// Email validation
if (this.id == 'sEmail') {

 // Email Unique
 if (this.value != '') {
 var errorMessage = 'Checking availability';
 var emailData = {sEmail: itemValue}
 $.getJSON('http://localhost:8501/ems/trunk/www/cfcs/admin_user_service.cfc?method=getAdminUser&returnFormat=json&queryformat=column', emailData,      
 function(data){

                        if (data != false) {
                            var errorMessage = 'This email address has already been registered';
                            $itemWrapper.find('span').text(errorMessage).addClass('errorInfoFalse').removeClass('errorInfoTrue');
                            $item.addClass('errorRow');
                        }
                        else {
                            var errorMessage = 'Good';
                            $itemWrapper.find('span').text(errorMessage);
                            $item.removeClass('errorRow');
                        }
                    })
                }
            }

This works fine, and checks if the email addresss added in the form is already in the database. If so an error is shown, if not things progress.

I then call this validation again on form submit, by triggering blur on the validation fields.

$('#setAdminUser').submit(function(){
                $('#submitMessage').remove();
                $(':input.conditional').trigger('blur');
                $(':input.text_field').trigger('blur');

                var numWarnings = $('.errorRow',this).length;
                if (numWarnings) {
                   // Show error messages

                }
                else {
                  // Everything is fine, create User

                }
            return false
    })

If any of the other fields are invalid whilst the email field is invalid, eg password too short, or fields left blank, when the form is submitted, the on blur validation is called. all the errors are shown, including the email on, and the user is not created.

However, if only the email field is invalid, the errors are not shown and the user is created. Im guessing that this is because the email validation is an ajax call, and this is happening too slowly? Any ideas? Thanks

Answer 1

The AJAX call is made asynchronously, when you trigger blur event manually for the inputs, the submit event won't wait for them. What you should be doing is make another AJAX call in the submit event, where you pass all the inputs values to the script that you want to validate, and then check the status of the validation in the callback. If it validated, then submit the form, something like this basically:

var isValid = false;
$('#setAdminUser').submit(function() {
    if (isValid) {
        return true;
    }

    var data = $(this).serialize();
    $.getJSON('/validate/data', data, function(status) {
        if (status) {
            isValid = true;
            $('#setAdminUser').submit();
        }
    });
    return false;
});