I had a rather complex situation, where I needed multiple submit buttons to process different things. For example, Save and Delete.
The basis was that it was also unobtrusive, so I couldn't just make it a normal button. But also wanted to utilize html5 validation.
As well the submit event was overridden in case the user pressed enter to trigger the expected default submission; in this example save.
Here is the efforts of the processing of the form to still work with/without javascript and with html5 validation, with both submit and click events.
jsFiddle Demo - HTML5 validation with submit and click overrides
xHTML
<form>
<input type="text" required="required" value="" placeholder="test" />
<button type="submit" name="save">Save</button>
<button type="submit" name="delete">Delete</button>
</form>
JavaScript
//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
var isValid = null;
var form = $('form');
var submitButton = form.find('button[type="submit"]')
var saveButton = submitButton.filter('[name="save"]');
var deleteButton = submitButton.filter('[name="delete"]');
//submit form behavior
var submitForm = function(e){
console.log('form submit');
//prevent form from submitting valid or invalid
e.preventDefault();
//user clicked and the form was not valid
if(isValid === false){
isValid = null;
return false;
}
//user pressed enter, process as if they clicked save instead
saveButton.trigger('click');
};
//override submit button behavior
var submitClick = function(e){
//Test form validitiy (HTML5) and store it in a global variable so both functions can use it
isValid = form[0].checkValidity();
if(false === isValid){
//allow the browser's default submit event behavior
return true;
}
//prevent default behavior
e.preventDefault();
//additional processing - $.ajax() etc
//.........
alert('Success');
};
//override submit form event
form.submit(submitForm);
//override submit button click event
submitButton.click(submitClick);
})(jQuery);
The caveat to using Javascript is that the browser's default onclick must propagate to the submit event MUST occur in order to display the error messages without supporting each browser in your code. Otherwise if the click event is overridden with event.preventDefault() or return false it will never propagate to the browser's submit event.
The thing to point out is that in some browsers will not trigger the form submit when the user presses enter, instead it will trigger the first submit button in the form. Hence there is a console.log('form submit') to show that it does not trigger.