Question

Using an HTML5 form with new type (email, url, etc), I have binded the submit event with a JS function.

The problem is that the browser first call this function, and then call its validation system, but only if the submit function hasn’t returned false.

Or, I do the Ajax request and all the work in that function, meaning I always return false.

How could I enable the browser validation to be executed before the call of the submit js function ?

Thanks for your help.

Answer 1

From specification the browser should first validate the form and then, if the form is valid should trigger a submit event. This means, that you simply should be able to do your Ajax submit inside the submit event.

Currently Opera does first fire the submit event and then does the validation. You can simply call manually the validation inside of your submit listener, using checkValidity-method:

$(form).bind('submit', function(){
    if(!this.checkValidity || this.checkValidity()){
        //do ajax and return false
    }
});

Note: that this can doubble the invalid events in those browsers, too. If you don’t use them, evrything should be fine. If you want to use them and don’t want them doubbled you can use webshims lib, which fixes this and other issues in different browsers.