chrome fails on jquery form validation

Question

Can someone explain to me why the form validation fails in chrome?

http://tinyurl.com/3yphwpl

Pressing the submit should colour empty fields red.

I have no idea why chrome fails - would be glad to find a solution...

$('form .meet').focus(function() {
    $('form .required').each(function() {
        if($(this).val() == '') {
            $(this).addClass('warning');
        }
    })
});
$('form .meet').click(function() {
    output = true;
    if($('form .warning').length > 0) {
        $(this).addClass('disabled').attr('disabled','disabled');
        output = false;
    }
    return output;
});
$('form .required').keyup(function() {
    if($(this).val()) {
        $(this).removeClass('warning');
        if($('form .warning').length == 0) {
            $('form .meet').removeClass('disabled').removeAttr('disabled');
        }
    }
});

.required are the input field that may not be empty

.meet are the submit fields related to .required

Answer 1

In Chrome, the click event fires before focus. Your code expects the focus event to occur first (to assign warning class to empty inputs). You should perform the input field value assessment on click.

$('form .meet').click(function() {
    output = true;
    $('form .required').each(function() {
        if($(this).val() == '') {
            $(this).addClass('warning');
        }
    });
    if($('form .warning').length > 0) {
        $(this).addClass('disabled').attr('disabled','disabled');
        output = false;
    }
    return output;
});