Si hemos presentado un formulario a nuestros usuarios es probable que queramos validar la información que hayan insertado antes de enviarlo. En esta situación, si encontramos algo que no nos cuadre deberemos poder bloquear el envío del formulario.
Ahora vamos a ver cómo podemos bloquear el envío de un formulario con jQuery. Pero lo primero será poner nuestro formulario HTML. Para ello utilizamos la etiqueta FORM:
En este caso el envío del formulario se ejecuta al pulsar sobre el elemento INPUT de tipo submit.
Lo que nosotros vamos a hacer es interceptar con jQuery el evento .submit() del formulario. Para ello nos posicionamos en el formulario y capturamos dicho evento:
$("#formulario").submit(function() {...});
Ahora ya tenemos el control del envío del formulario. La idea es asignar una función que atienda a este evento .submit(). Si queremos bloquear el envío del formulario la función deberá devolver false. Si queremos que se envíe el formulario deberemos de devolver true.
Para demostrar el funcionamiento vamos a comprobar que el texto introducido coincide con una palabra. Si no coincide bloqueamos el envío del formulario (con el false) y si coincide, enviamos el formulario (con el true).
$(document).ready(function(){
$("#formulario").submit(function() {
var x = $("#valor").val();
if (x!="enviar") {
alert("Valor introducido no válido");
return false;
} else
return true;
});
});
Ya tenemos el código de cómo bloquear el envío de un formulario con jQuery.
