Catch submit before HTML5 validation

Question

Is there any way to catch a form's submit action before HTML5 validation steps in?

This is what I have tried:

HTML

<form method='post' >
    <fieldset>
        <input type='email' name='foo' required />
        <input type='submit' />
    </fieldset>
</form>

jQuery

$('form').submit(function() {
    $('fieldset').addStyle('error');
    return false;
})

But the submit is only triggered once the HTML5 validation passes.

Answer 1

Nope, the HTML5 validation happens before any submit event, in all browsers, so it's not possible, other than changing the event type, like a click on the button :

$('input[type="submit"]').on('click', function() {
    $('fieldset').addClass('error');
});

FIDDLE

Answer 2

Use jquery to disable the validation on the form when the page first loads so you can prevent any validation from occurring before your onsubmit handler has run:

$(document).ready(function(){
   $('form').attr('novalidate','novalidate');
})

and then at the end of your onsubmit function, manually run the HTML5 validation on each of the fields via javascript (using checkValidity())