У меня была довольно сложная ситуация, когда мне нужно было несколько кнопок отправки для обработки разных вещей. Например, Сохранить и Удалить.
Основанием было то, что это было также ненавязчиво, поэтому я не мог просто сделать его нормальной кнопкой. Но также хотел использовать проверку HTML5.
Также событие отправки было переопределено в случае, если пользователь нажал клавишу ввода, чтобы вызвать ожидаемую отправку по умолчанию; в этом примере сохранить.
Вот усилия по обработке формы, чтобы по-прежнему работать с / без javascript и с проверкой html5, с событиями submit и click.
jsFiddle Demo - проверка HTML5 с переопределением отправки и клика
одной рубрике
<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 заключается в том, что стандартный щелчок браузера должен распространяться на событие отправки ДОЛЖНО происходить для отображения сообщений об ошибках без поддержки каждого браузера в вашем коде. В противном случае, если событие click переопределено с помощью event.preventDefault () или вернет false, оно никогда не будет распространено на событие отправки браузера.
Следует отметить, что в некоторых браузерах не будет инициировать отправку формы, когда пользователь нажимает клавишу ввода, вместо этого она будет вызывать первую кнопку отправки в форме. Следовательно, существует console.log ('form submit'), чтобы показать, что он не запускается.