Tuve una situación bastante compleja, donde necesitaba múltiples botones de envío para procesar diferentes cosas. Por ejemplo, Guardar y Eliminar.
La base era que también era discreto, por lo que no podía simplemente convertirlo en un botón normal. Pero también quería utilizar la validación html5.
Además, el evento de envío se anuló en caso de que el usuario presione enter para activar el envío predeterminado esperado; en este ejemplo guardar.
Estos son los esfuerzos del procesamiento del formulario para seguir funcionando con / sin javascript y con la validación html5, con eventos de envío y clic.
jsFiddle Demo: validación HTML5 con anulaciones de envío y clic
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);
La advertencia sobre el uso de Javascript es que el onclick predeterminado del navegador debe propagarse al evento de envío DEBE ocurrir para mostrar los mensajes de error sin admitir cada navegador en su código. De lo contrario, si el evento de clic se anula con event.preventDefault () o devuelve falso, nunca se propagará al evento de envío del navegador.
Lo que hay que señalar es que en algunos navegadores no se activará el envío del formulario cuando el usuario presione Intro, sino que se activará el primer botón de envío del formulario. Por lo tanto, hay una consola.log ('envío de formulario') para mostrar que no se dispara.