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

5
(2)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

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

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.[vc_custom_heading text=»El código html» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<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>

Validación de formularios web: Como desactivar el envío con Javascript 2
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.[vc_custom_heading text=»El código css» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<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>

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

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!

  1. Avatar de Walter
    Walter

    Hola, muy bueno el curso.
    En el capitulo 37, falta el código CSS.
    El capítulo 38 abre una página en blanco.

    1. Avatar de Francesc Ricart

      Hola Walter
      ¡ok lo reviso muchas gracias!

  2. Avatar de Ángel Alcalde Moreno

    Hola Francesc.
    Me llamo Ángel y estoy aprendiendo creación y deiseño de páginas web. Llegué aquí porque estoy buscando como evitar que en la zona que tiene el usuario para comentarios, evitar que pueda enviar insultos y palabras malsonantes. Lo de evitar spam que has publicado me parece bien.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *