Question

Is there any event raised before the validation of fields in an HTML5 form and before the submit of this form?

AFAIK, the submit event is raised just before the submit of the form, but after the validation step, so this one fires too late for me.

Update: I have a textarea with the “required” property, and if the user has JS I want to substitute it by an HTML editor. The HTML editor syncs its contents with the textarea on submit (after the validation step), so for the browser the textarea is always empty. That’s why I’m asking for an event fired before the validation. Any other way answer that solves this problem will be accepted.

Answer 1

No, there is no event which fires before validation happens. There is only the invalid event, which is fired after validation of an invalid field, but before the validation UI is shown (preventing the default prevents showing the browser validation UI).

In case you want to sync two fields, you have to use two events. The first is DOMContentReady and the second is the change event.

Additional info: if you hide the invalid field element, the browser can not show the validation message to the user. You can workaround this with the following code (note this assumes that you are using jQuery 1.6x and a special structure):

$('textarea.wysiwyg').bind('invalid', function(e){
    //remove validation bubble
    e.preventDefault();
    //implement your own validation UI
    $(this).next('div.wysiwyg').after('<p class="error">'+ $.prop(this, 'validationMessage') +'</p>');
});