ฉันมีสถานการณ์ที่ค่อนข้างซับซ้อนซึ่งฉันต้องการปุ่มส่งหลายปุ่มเพื่อดำเนินการสิ่งต่าง ๆ ตัวอย่างเช่นบันทึกและลบ
พื้นฐานก็คือมันก็ไม่เป็นการรบกวนดังนั้นฉันจึงไม่สามารถทำให้มันเป็นปุ่มปกติ แต่ยังต้องการใช้การตรวจสอบ html5
เช่นกันเหตุการณ์ส่งถูกแทนที่ในกรณีที่ผู้ใช้กด Enter เพื่อทริกเกอร์การส่งเริ่มต้นที่คาดไว้ ในตัวอย่างนี้บันทึก
นี่คือความพยายามของการประมวลผลของแบบฟอร์มที่จะยังคงทำงานโดยมี / ไม่มี javascript และการตรวจสอบความถูกต้อง html5 ด้วยการส่งและคลิกเหตุการณ์
jsFiddle Demo - การตรวจสอบ HTML5 พร้อมส่งและคลิกแทนที่
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);
ข้อแม้ที่จะใช้ Javascript คือการคลิกเริ่มต้นของเบราว์เซอร์ต้องเผยแพร่สู่เหตุการณ์ส่งต้องเกิดขึ้นเพื่อแสดงข้อความแสดงข้อผิดพลาดโดยไม่สนับสนุนแต่ละเบราว์เซอร์ในรหัสของคุณ มิฉะนั้นหากเหตุการณ์การคลิกถูกแทนที่ด้วย event.preventDefault () หรือส่งคืนค่าเท็จจะไม่เผยแพร่ไปยังกิจกรรมส่งของเบราว์เซอร์
สิ่งที่จะชี้ให้เห็นคือในบางเบราว์เซอร์จะไม่ทริกเกอร์การส่งแบบฟอร์มเมื่อผู้ใช้กดป้อน แต่มันจะทริกเกอร์ปุ่มส่งครั้งแรกในแบบฟอร์ม ดังนั้นจึงมี console.log ('ส่งแบบฟอร์ม') เพื่อแสดงว่ามันไม่ได้ทริกเกอร์