J'ai eu une situation assez complexe, où j'avais besoin de plusieurs boutons de soumission pour traiter différentes choses. Par exemple, Enregistrer et supprimer.
La base était qu'il était également discret, donc je ne pouvais pas simplement en faire un bouton normal. Mais je voulais également utiliser la validation html5.
De plus, l'événement de soumission a été remplacé au cas où l'utilisateur aurait appuyé sur Entrée pour déclencher la soumission par défaut attendue; dans cet exemple, enregistrez.
Voici les efforts du traitement du formulaire pour continuer à fonctionner avec / sans javascript et avec la validation html5, avec des événements de soumission et de clic.
Démo jsFiddle - Validation HTML5 avec soumissions et clics
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);
La mise en garde à l'utilisation de Javascript est que le onclick par défaut du navigateur doit se propager à l'événement de soumission DOIT se produire afin d'afficher les messages d'erreur sans prendre en charge chaque navigateur dans votre code. Sinon, si l'événement click est remplacé par event.preventDefault () ou renvoie false, il ne se propagera jamais à l'événement submit du navigateur.
La chose à noter est que dans certains navigateurs ne déclenchera pas le formulaire soumis lorsque l'utilisateur appuie sur entrée, il déclenchera plutôt le premier bouton de soumission du formulaire. Il y a donc un fichier console.log ('form submit') pour montrer qu'il ne se déclenche pas.