💡 ¿Quieres aprender más? Este artículo es parte de nuestra Recopilación de Plugins JavaScript y jQuery → donde encontrarás más de 20 tutoriales gratuitos esperándote para llevar tus habilidades al siguiente nivel.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.| <!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> |
El script se divide en tres secciones fundamentales: la estructura HTML, la lógica de validación y el control del envío.
Estructura del Formulario (Líneas 8-32): Definimos los campos de nombre, apellidos, email, password y confirmación. Es vital notar que en la línea 8 asignamos
name="procesar". Esto nos permite acceder a sus atributos en JavaScript de forma sencilla mediantedocument.procesar.Validación de Formato (Líneas 36-40): Implementamos una función específica que utiliza una expresión regular (RegEx) para verificar que el email ingresado tenga una estructura válida.
Control del Evento Submit (Línea 43): Interceptamos el envío del formulario. Utilizamos una variable booleana llamada
readyque funciona como centinela; su estado determinará si el formulario se procesa o se detiene.Flujo de Validaciones:
Campos Vacíos (Líneas 46-51): Verificamos que ningún campo esté vacío. Si falta información,
readycambia afalse, se muestra una alerta y usamose.preventDefault()para frenar el envío.Formato de Email (Líneas 54-68): Si los campos están llenos, validamos el correo. Si el formato es incorrecto, detenemos el proceso.
Confirmación de Password (Líneas 56-62): Comparamos ambas contraseñas. Si no coinciden, lanzamos una alerta, ponemos el
focus()en el campo de password y cancelamos el envío.
Resultado final: Si todas las condiciones se cumplen, el formulario continúa su curso natural hacia procesar.php.
¿Necesitas un software de ventas listo para producción?
Inventio Max es la solución profesional con soporte para múltiples almacenes, reportes avanzados y gestión de usuarios.Ver Inventio Max – Sistema de Inventario y Ventas Profesional →