Validación de formularios web: Como desactivar el envío con Javascript

Validación de formularios web: Como desactivar el envío con Javascript

Print Friendly, PDF & Email
Valora esta entrada

La validación de formularios es una de las principales razones que dio lugar al origen del lenguaje de programación de estudio en este tutorial.

Los programadores de los 90′ afrontaban el reto de la lentitud de Internet.

Enviar un formulario hasta el servidor y que este lo validara y enviara de vuelta la información para que se cargara de nuevo la página era un incordio.

Se pensó que sería una buena idea un lenguaje que hiciera posible una primera validación en el lado cliente para enviar los datos correctos a la primera.

De aquí el origen de Javascript por parte de Netscape.

Veamos con esta publicación un ejemplo de  como podemos hacer para desactivar el envío del formulario web cuando este no cumpla una serie de requisitos básicos.

El evento submit

Submit es el evento que hace posible el envío de información de un formulario web.

Puede ser activado mediante un <input type="submit" value="enviar datos"> al clicar el botón de enviar.

O cuando lo llamamos en modalidad de evento mediante la instrucción.submit()

Existen varios tutoriales y métodos en la red de como hacerlo.

Personalmente no me gusta ninguno así que os mostraré un ejemplo de como me parece la forma más didáctica y fácil de entender.

Veamos primero el html y el css del formulario que vamos a validar.

El código html

<form action="https://francescricart.com/tutorial-javascript" target="_blank" name="formulario">
	<label for="nombre">Nombre:</label>
	<input type="text" name="nombre" id="nombre" placeholder="escribe tu nombre">
	<span class="errorNombre" id="errorNombre"></span>

	<label for="email">Email:</label>
	<input type="email" name="email" id="name" placeholder="escribe tu email" required/>
	<span class="errorEmail" id="errorEmail"></span>

	<input type="submit" value="enviar" name="enviar" id="enviar">
</form>
resultado formulario sin css
Resultado formulario sin css

Fijaros que después de cada input se introduce un span con el objetivo de indicar el error en caso de que no se valide el formulario para su envío.

Esto pasará por ejemplo cuando el usuario no rellene el campo nombre.

Para el campo email fíjate que lleva un atributo html5 required. Para practicar este ejemplo tal vez te sea útil borrarlo.

El código css

<form action="https://francescricart.com/tutorial-javascript" target="_blank" name="formulario">
	<label for="nombre">Nombre:</label>
	<input type="text" name="nombre" id="nombre" placeholder="escribe tu nombre">
	<span class="errorNombre" id="errorNombre"></span>

	<label for="email">Email:</label>
	<input type="email" name="email" id="name" placeholder="escribe tu email" required/>
	<span class="errorEmail" id="errorEmail"></span>

	<input type="submit" value="enviar" name="enviar" id="enviar">
</form>
formulario html con css
formulario html con css aplicado

Capturar el evento y usar preventDefault()

Existen dos conceptos clave imprescindibles:

A modo de repaso tengamos en cuenta que la idea para capturar un evento es la siguiente:

¿Como se captura un evento?

function capturarEvento(e){
	//e es el evento que ha sido activado. se captura "mágicamente"

	e = e || window.event; 
	console.log(e);

	//cuando veamos la consola veréis un objeto
}

Es un concepto difícil de entender. Lo más práctico es aprenderlo como un concepto teórico:

 – Cuando pasamos una variable por una función y esta variable aparece de nada, la variable toma por valor el evento que ha activado la función.

En cuanto al uso de preventDefault() pasaros por esta entrada y por este ejercicio a modo de ejemplo.

Una vez repasados los conceptos veamos ahora el código JS necesario para parar el envío de un formulario si este no se envía correctamente.

Como validar un formulario web y parar su envío si necesario

window.addEventListener("load",function(){
	document.formulario.addEventListener("submit",validarFormulario);
	window.formulario.nombre.addEventListener("input",function(){
		 document.getElementById("errorNombre").innerHTML= "";
	})

});		

function validarFormulario(e){
	e = e || window.event;
	if(window.formulario.nombre.value==""){
		e.preventDefault();
		document.getElementById("errorNombre").innerHTML= "Debes rellenar el campo";
		document.getElementById("errorNombre").setAttribute("style","color:red;");
	}else{
		//podríamos escribir si quisiéramos document.formulario.submit() y forzaríamos el envío pero es innecesario porqué se hará igualmente.
                console.log("el formulario se ha enviado");
	}
}

En el ejemplo mostrado primero se ejecuta el javascript una vez se ha cargado el documento web. Es el evento «load».

A continuación asignamos al formulario web el evento submit y lo asociamos a la función validarFormulario. La llamada a la función no lleva paréntesis porqué se trata de una asignación y no una ejecución inmediata.

Dejemos el evento input para un poco más adelante una vez validado el formulario web.

Dentro de la función validarFormulario se captura el evento. El evento será siempre submit pues es el que se ha asignado al cargar el formulario.

Si se detecta que el campo nombre está vacío entonces paramos el comportamiento del evento submit mediante e.preventDefault() y escribimos un mensaje de error mediante innerHTML.

En caso de que todo sea correcto se envía el formulario y además emitimos un aviso por la consola del navegador.

Para finalizar volvamos al primer bloque de código. El evento input sirve para que cuando se empiece a escribir se borre el aviso de que el campo nombre es obligado.

¡Hola querido lector@!

Hasta aquí todo lo que necesitamos saber para desactivar el envío de un formulario web.

Ahora deberíamos aprender cual es la mejor forma de comprobar que un número es un número y que un texto tiene un formato determinado.

Existen más formas de hacerlo pero esta es mi favorita. Pienso que es la más clara.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.