Ho avuto una situazione piuttosto complessa, in cui avevo bisogno di più pulsanti di invio per elaborare cose diverse. Ad esempio, Salva ed Elimina.
La base era che era anche discreto, quindi non potevo semplicemente renderlo un pulsante normale. Ma volevo anche utilizzare la validazione html5.
Inoltre l'evento di invio è stato ignorato nel caso in cui l'utente abbia premuto invio per attivare l'invio predefinito previsto; in questo esempio salva.
Ecco gli sforzi dell'elaborazione del modulo per continuare a lavorare con / senza javascript e con la convalida html5, con eventi di invio e clic.
Demo jsFiddle - Convalida HTML5 con sostituzioni di invio e clic
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);
L'avvertenza nell'uso di Javascript è che il clic predefinito del browser deve propagarsi all'evento di invio DEVE verificarsi per visualizzare i messaggi di errore senza supportare ciascun browser nel codice. Altrimenti se l'evento click viene sovrascritto con event.preventDefault () o restituisce false, non si propagherà mai all'evento di invio del browser.
La cosa da sottolineare è che in alcuni browser non attiverà l'invio del modulo quando l'utente preme invio, invece attiverà il primo pulsante di invio nel modulo. Quindi c'è un console.log ('form submit') per mostrare che non si innesca.