Saya mengalami situasi yang agak rumit, di mana saya perlu beberapa tombol kirim untuk memproses berbagai hal. Misalnya, Simpan dan Hapus.
Dasarnya adalah itu juga tidak mengganggu, jadi saya tidak bisa menjadikannya tombol biasa. Tetapi juga ingin memanfaatkan validasi HTML5.
Selain itu acara pengiriman ditimpa jika pengguna menekan enter untuk memicu pengiriman default yang diharapkan; dalam contoh ini simpan.
Berikut adalah upaya pemrosesan formulir untuk tetap bekerja dengan / tanpa javascript dan dengan validasi html5, dengan kedua ajukan dan klik acara.
jsFiddle Demo - Validasi HTML5 dengan mengirim dan mengklik penggantian
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);
Peringatan untuk menggunakan Javascript adalah bahwa onclick default browser harus menyebar ke acara kirim HARUS terjadi untuk menampilkan pesan kesalahan tanpa mendukung setiap browser dalam kode Anda. Kalau tidak, jika acara klik ditimpa dengan event.preventDefault () atau return false, itu tidak akan menyebar ke acara pengiriman browser.
Hal yang perlu diperhatikan adalah bahwa di beberapa browser tidak akan memicu pengiriman formulir ketika pengguna menekan masuk, melainkan akan memicu tombol kirim pertama dalam formulir. Karenanya ada console.log ('form submit') untuk menunjukkan bahwa itu tidak memicu.