Eu tive uma situação bastante complexa, onde eu precisava de vários botões de envio para processar coisas diferentes. Por exemplo, Salvar e excluir.
A base era que também era discreto, então eu não podia simplesmente torná-lo um botão normal. Mas também queria utilizar a validação html5.
O evento de envio também foi substituído caso o usuário pressionasse enter para acionar o envio padrão esperado; neste exemplo, salve.
Aqui estão os esforços do processamento do formulário para continuar trabalhando com / sem javascript e com a validação html5, com eventos de envio e clique.
Demonstração do jsFiddle - validação HTML5 com substituições de envio e clique
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);
A ressalva de usar o Javascript é que o onclick padrão do navegador deve se propagar para o evento de envio DEVE ocorrer para exibir as mensagens de erro sem oferecer suporte a cada navegador no seu código. Caso contrário, se o evento click for substituído por event.preventDefault () ou retornar false, ele nunca será propagado para o evento de envio do navegador.
O ponto a ser destacado é que em alguns navegadores não acionará o envio do formulário quando o usuário pressionar enter, em vez disso, acionará o primeiro botão de envio no formulário. Portanto, existe um console.log ('envio de formulário') para mostrar que ele não é acionado.