[Javascript] Validar un formulario de registro, email y passwords
Validar un formulario sirve para que el usuario inserte los datos requeridos en cada campo, así como el formato y en algunos casos que se cumplan algunas condiciones.
En este articulo les enseñare una forma fácil de crear un formulario de registro con una validación sencilla con puro javascript.
Código
A continuación les dejo el código en un gist de github.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Validar un formulario</title> | |
| </head> | |
| <body> | |
| <h1>Validar un formulario con PHP</h1> | |
| <form method="post" action="procesar.php" id="procesar" name="procesar"> | |
| <div> | |
| <label for="nombre">Nombre: </label> | |
| <input type="text" name="nombre" id="nombre"> | |
| </div> | |
| <div> | |
| <label for="apellidos">Apellidos: </label> | |
| <input type="text" name="apellidos" id="apellidos"> | |
| </div> | |
| <div> | |
| <label for="email">Email: </label> | |
| <input type="text" name="email" id="email"> | |
| </div> | |
| <div> | |
| <label for="password">Password: </label> | |
| <input type="password" name="password" id="password"> | |
| </div> | |
| <div> | |
| <label for="confirm">Confirmar password: </label> | |
| <input type="password" name="confirm" id="confirm"> | |
| </div> | |
| <div> | |
| <input type="submit" id="submit" value="Procesar"> | |
| </div> | |
| </form> | |
| <script type="text/javascript"> | |
| function validarEmail(email) | |
| { | |
| var re = /\S+@\S+\.\S+/; | |
| return re.test(email); | |
| } | |
| var form = document.procesar; | |
| document.procesar.onsubmit = function(e){ | |
| var ready = false; | |
| if(form.nombre.value!="" && form.apellidos.value!=""&& form.email.value!=""&& form.password.value!="" && form.confirm.value!=""){ | |
| ready = true; | |
| }else{ | |
| ready= false; | |
| alert("Hay algunos campos vacios"); | |
| e.preventDefault(); | |
| } | |
| if(ready){ | |
| if(validarEmail(form.email.value)){ | |
| if(form.password.value==form.confirm.value){ | |
| ready = true; | |
| }else{ | |
| ready= false; | |
| alert("El password y la confirmacion no coinciden"); | |
| form.password.focus(); | |
| e.preventDefault(); | |
| } | |
| }else { | |
| alert("El email no tiene un formato valido!"); | |
| form.email.focus(); | |
| e.preventDefault(); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
De las lineas 8 a la 32 tenemos el formulario con los campos, nombre, apellidos, email, password y confirmación de password. Todos los campos tienen un name y un id.
En la linea 8 se crea el formulario, le agregamos el method, action, name e id, es importante colocarle un name (en este caso name=”procesar”) para poder acceder a los atributos del formulario en javascript de la forma: document.procesar
En las linea 36 a la 40 hay una funcion para validar el email usando una expresión regular.
En la linea 43 usamos el método submit del formulario, cuando el usuario haga submit entonces empezaremos la validación, usamos una variable booleana “ready” como un “centinela” para saber si continuar o no y seguir con las validaciones.
En la linea 46 verificamos que los campos no estén vacíos, en caso de que no estén vacíos asignamos “ready=true”, en caso de que algún campo este vació, saltamos a las lineas 49 a la 51, donde se asigna ready=false, se muestra un alert() y se detiene el comportamiento del formulario con e.preventDefault().
En la linea 54 verificamos si la variable ready es true, es decir los campos no están vacíos, entonces en la linea 45 verificamos el si el email cuenta con el formato de email, si el formato es incorrecto, saltamos a las lineas 65-68 donde se hace un alert() y se detiene el comportamiento del formulario.
En la linea 56 verificamos si el password es igual al password de confirmación, si no son iguales saltamos a las lineas 59-62, donde mostramos una alerta, enfocamos el campo de password y detenemos el formulario.
Si todo esta correcto, el formulario continuara de manera normal a el archivo definido en el action (action=”procesar.php”).
Bueno, aquí termino este articulo, si tienen dudas y comentarios por favor escribanlos 😉 y no se olviden de apoyarnos con sus likes, y suscripciones.