En este post te enseñaré a validar formularios HTML usando JavaScript nativo o JS puro, sin usar frameworks ni librerías externas.

Validar formulario con JavaScript y HTML

Validar formulario con JavaScript y HTML

De este modo vas a poder comprobar si un formulario se envía dependiendo de los valores que el usuario haya colocado. Te enseñaré un ejemplo para que veas cómo validar un formulario en JavaScript apoyándote además de la validación nativa de HTML.

Solo recuerda que la validación del lado del cliente se hace por mera decoración, y no por seguridad; ya que la seguridad se aplica en el lado del servidor.

Conceptos básicos de la validación

Lo que debemos hacer es obtener una referencia al elemento DOM del formulario en sí y escuchar el evento submit, que es cuando se envía el formulario. Este evento será llamado solo si el mismo es válido según las reglas HTML.

Adicional a las reglas de validación (como required, min, etcétera) podemos aplicar una validación personalizada. Para ello detenemos el envío del formulario con preventDefault, comprobamos que todo esté correcto y luego invocamos a submit.

Verás que es muy fácil con los ejemplos.

Preparando el formulario

Veamos el código HTML. Fíjate en el id que tiene el form y cada input.

También nota que ambos campos tienen el atributo required. Esto nos ahorra validación pues cuando el formulario sea enviado sabremos que los campos están llenos.

Script de JavaScript

Ahora obtenemos referencias a los elementos con JS (usando querySelector) y escuchamos el envío del formulario. Tan pronto el mismo sea enviado, vamos a detener su comportamiento con preventDefault.

Ahora realizamos la validación dentro de la línea 7. Recuerda que ya tenemos una referencia al campo de nombre en $nombre, y una al correo con $correo.

Validando

Aquí estoy poniendo una validación simple de que el nombre no puede ser Luis ni José en la línea 10, y si ese es el caso, muestro una alerta en la línea 11 además de detener la ejecución con el return de la 12.

Por otro lado, el correo no puede ser de hotmail como se ve en la línea 14. Por cierto, en lugar de un simple alert puedes usar una alerta de Sweet Alert 2.

Lo importante es que si quieres enviar el formulario debes invocar a $formulario.submit(), solo en caso de que quieras que se envíe. En caso de que no, coloca un return dentro de la función para que nunca llegues a ese fragmento de código, o coloca el envío en el else.

Poniendo todo junto

El código completo queda así, incluyendo el formulario HTML y el código de JavaScript.

Si quieres puedes probarlo en este enlace. También puedes aprender más sobre JavaScript en mi blog.

He subido un vídeo a YouTube explicando lo del post:


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,597 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

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

A %d blogueros les gusta esto: