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.
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');
});
function(e) and inside the function in the first line e.preventDefault; otherwise the form will submit. Then when you are ready add at the end of the function $('form').submit()
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())
Change the button from
<input type='submit' />
to a regular button
<input type='button' id="submit" />
And after that, just capture the click event and do the submit yourself
$('#submit').on('click', function() {
$('fieldset').addStyle('error');
// if everything is ok
$('form').submit();
})
You can intercept the "invalid" event for that element, apply the class and then return false to cancel it
https://developer.mozilla.org/en-US/docs/Web/Events/invalid
Also I added a focus and keydown event to remove the class.
$('form').submit(function() {
$('fieldset').addStyle('error');
return false;
})
$('input').on("invalid", function(e){
//Code: Action (like ajax...)
$(e.target).addClass("error");
return false;
});
$('input').on("focus", function(e){
//Code: Action (like ajax...)
$(e.target).removeClass("error");
});
$('input').on("keydown", function(e){
//Code: Action (like ajax...)
$(e.target).removeClass("error");
});.error {
border: 2px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' >
<fieldset>
<input type='email' name='foo' required />
<input type='submit' />
</fieldset>
</form>Note that it may have the same limitations as HTMLFormElement.reportValidity()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
novalidate.