Ich hatte eine ziemlich komplexe Situation, in der ich mehrere Senden-Schaltflächen benötigte, um verschiedene Dinge zu verarbeiten. Zum Beispiel Speichern und Löschen.
Die Basis war, dass es auch unauffällig war, so dass ich es nicht einfach zu einem normalen Knopf machen konnte. Wollte aber auch die HTML5-Validierung nutzen.
Außerdem wurde das Übermittlungsereignis überschrieben, falls der Benutzer die Eingabetaste drückte, um die erwartete Standardübermittlung auszulösen. in diesem Beispiel speichern.
Hier sind die Bemühungen der Verarbeitung des Formulars, weiterhin mit / ohne Javascript und mit HTML5-Validierung mit Submit- und Click-Ereignissen zu arbeiten.
jsFiddle Demo - HTML5-Validierung mit Überschreibungen zum Senden und Klicken
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);
Die Einschränkung bei der Verwendung von Javascript besteht darin, dass der Standard-Onclick des Browsers an das Submit-Ereignis weitergegeben werden muss, um die Fehlermeldungen anzuzeigen, ohne jeden Browser in Ihrem Code zu unterstützen. Andernfalls wird das Klickereignis, wenn es mit event.preventDefault () überschrieben wird oder false zurückgibt, niemals an das Submit-Ereignis des Browsers weitergegeben.
Es ist darauf hinzuweisen, dass in einigen Browsern das Senden des Formulars nicht ausgelöst wird, wenn der Benutzer die Eingabetaste drückt, sondern die erste Schaltfläche zum Senden im Formular ausgelöst wird. Daher gibt es ein console.log ('form submit'), das anzeigt, dass es nicht ausgelöst wird.