Miałem dość złożoną sytuację, w której potrzebowałem wielu przycisków przesyłania, aby przetwarzać różne rzeczy. Na przykład Zapisz i Usuń.
Podstawą było to, że był również dyskretny, więc nie mogłem po prostu zrobić z niego normalnego przycisku. Ale chciałem również wykorzystać sprawdzanie poprawności HTML5.
Zdarzenie przesłać również zostało zastąpione w przypadku, gdy użytkownik nacisnął klawisz Enter, aby uruchomić oczekiwane domyślne przesyłanie; w tym przykładzie zapisz.
Oto wysiłki przetwarzania formularza, aby nadal działać z / bez javascript i ze sprawdzaniem poprawności HTML5, zarówno ze zdarzeniami przesyłania, jak i klikania.
jsFiddle Demo - sprawdzanie poprawności HTML5 z przesłonięciem przesłania i kliknięcia
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);
Zastrzeżenie dotyczące używania Javascript polega na tym, że domyślne kliknięcie przeglądarki musi zostać przeniesione do zdarzenia wysyłania MUSI się zdarzyć, aby wyświetlić komunikaty o błędach bez obsługi każdej przeglądarki w kodzie. W przeciwnym razie, jeśli zdarzenie kliknięcia zostanie zastąpione przez event.preventDefault () lub zwróci false, nigdy nie zostanie ono przeniesione do zdarzenia przesłania przeglądarki.
Należy zwrócić uwagę na to, że w niektórych przeglądarkach nie uruchamia formularza wysyłania, gdy użytkownik naciśnie klawisz Enter, zamiast tego uruchamia pierwszy przycisk przesyłania w formularzu. Dlatego istnieje plik console.log („formularz przesłania”), który pokazuje, że nie uruchamia się.