En este post te enseñaré a validar formularios HTML usando JavaScript nativo o JS puro, sin usar frameworks ni librerías externas.
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.
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.
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.
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
.
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
.
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:
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.