Bloquear el envío de un formulario con jQuery

03/Abr/2011 jQuery 4 Comentarios

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:

  1. <form id="formulario" action="post.php">
  2. <label for="valor">Inserta un valor: </label><input id="valor" type="text" size="10">
  3. <input type="submit" value="Enviar"/>
  4. </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:

  1. $("#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).

  1. $(document).ready(function(){
  2. $("#formulario").submit(function() {
  3. var x = $("#valor").val();
  4. if (x!="enviar") {
  5. alert("Valor introducido no válido");
  6. return false;
  7. } else
  8. return true;
  9. });
  10. });

Ya tenemos el código de cómo bloquear el envío de un formulario con jQuery.

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Bloquear el envío de un formulario con jQuery”

Víctor Cuervo

asdyno

Funciona perfectamente.
Gran ayuda, muchas gracias.

Víctor Cuervo

Víctor Cuervo

Nos alegra que te haya servido de ayuda. 😀

Víctor Cuervo

Erik

excelente me fue de gran ayuda

Víctor Cuervo

tabam

Exelente, me recontra sirve, felicitaciones!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*