Tôi đã có một tình huống khá phức tạp, nơi tôi cần nhiều nút gửi để xử lý những thứ khác nhau. Ví dụ: Lưu và Xóa.
Cơ sở là nó cũng không phô trương, vì vậy tôi không thể biến nó thành một nút bình thường. Nhưng cũng muốn sử dụng xác nhận html5.
Đồng thời, sự kiện gửi đã bị ghi đè trong trường hợp người dùng nhấn enter để kích hoạt trình gửi mặc định dự kiến; trong ví dụ này lưu.
Dưới đây là những nỗ lực xử lý biểu mẫu để vẫn hoạt động với / không có javascript và với xác thực html5, với cả sự kiện gửi và nhấp.
jsFiddle Demo - Xác thực HTML5 bằng cách gửi và nhấp vào ghi đè
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);
Nhắc nhở khi sử dụng Javascript là onclick mặc định của trình duyệt phải lan truyền đến sự kiện gửi PHẢI xảy ra để hiển thị các thông báo lỗi mà không hỗ trợ mỗi trình duyệt trong mã của bạn. Mặt khác, nếu sự kiện nhấp được ghi đè bằng event.preventDefault () hoặc trả về false, nó sẽ không bao giờ lan truyền đến sự kiện gửi của trình duyệt.
Điều cần chỉ ra là trong một số trình duyệt sẽ không kích hoạt biểu mẫu gửi khi người dùng nhấn enter, thay vào đó, nó sẽ kích hoạt nút gửi đầu tiên trong biểu mẫu. Do đó, có một console.log ('mẫu gửi') để cho thấy rằng nó không kích hoạt.