El dia de hoy vamos a ver un poco de validacion de formularios con javascript, html e informar al usuario de estos errores, todo del lado del cliente como una primera etapa de seguridad en nuestros proyectos web. La seguridad es un factor importante de ayer, hoy y siempre, por lo que ver y entender este tema es de suma importancia para todos los que nos dedicamos a este mundo del desarrollo, a nadie nos gusta crear sistemas débiles que caen a la primera de cambios y es por esto que hoy damos un pequeño paso para asegurar el funcionamiento deseado de nuestros sistemas, la validacion de formularios con javascript del lado del cliente..
Escenario
Vamos a desarrollar un simple formulario web, si ese con html facil, el cual validara algunas reglas que nosotros queremos que se cumplan o que nuestro sistema requiere, finalmente mostraremos al usuarios cuando no cumpla con alguna de esta regla permitiendo editar tal campo erroneo para posteriormente mandar el formulario a su destino.
Nuestras reglas seran:
- Todos los campos son obligatorios
- El campo nip debe de ser de 4 digitos
- El campo para repetir nip debera ser el mismo que el campo nip anterior
- El campo email debe ser en realidad un email
Pues adelante, comencemos nuestra validacion de formularios con Javascript!
Validacion de Formularios – Codigo
Aqui tenemos el codigo html

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:
WebEmpresa<form name="formulario" onsubmit="return validarFormulario()"> <fieldset><legend>Nombre:</legend> <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre aqui!"></fieldset> <fieldset><legend>Email:</legend> <input type="text" id="email" name="email" placeholder="contacto@jonathanmelgoza.com"></fieldset> <fieldset><legend>NIP:</legend> <input type="text" id="nip" name="nip" placeholder="Escribe tu NIP"></fieldset> <fieldset><legend>Confirmar NIP:</legend> <input type="text" id="nip_again" name="nip_again" placeholder="Escribe tu NIP de nuevo"></fieldset> <input type="submit" value="Enviar"> </form>
aca el css
input[type=submit]{ margin-top:10px; -webkit-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; -moz-box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; box-shadow:rgba(0,0,0,0.0.1) 0 1px 0 0; background-color:#5B74A8; border:1px solid #29447E; font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif; font-size:12px; font-weight:700; padding:2px 6px; height:28px; color:#fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid black; }
y por aca le javascript
function validarFormulario(){ var nombre = document.forms["formulario"]["nombre"].value; var email = document.forms["formulario"]["email"].value; var nip = document.forms["formulario"]["nip"].value; var nip_again = document.forms["formulario"]["nip_again"].value; var email_t = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; document.getElementById("nombre").style.border="1px solid black"; document.getElementById("email").style.border="1px solid black"; document.getElementById("nip").style.border="1px solid black"; document.getElementById("nip_again").style.border="1px solid black"; var error = false; if(nombre == ""){ document.getElementById("nombre").style.border="1px solid red"; error = true; } if(email == "" || !email_t.test(email)){ document.getElementById("email").style.border="1px solid red"; error = true; } if(nip == "" || nip.length != 4){ document.getElementById("nip").style.border="1px solid red"; error = true; } if(nip_again == "" || nip_again.length != 4){ document.getElementById("nip_again").style.border="1px solid red"; error = true; } if(nip != nip_again){ document.getElementById("nip").style.border="1px solid red"; document.getElementById("nip_again").style.border="1px solid red"; error = true; } if(error){ return false; } return true; }
¿Que te pareció? Seguro que lo puedes mejorar.. El siguiente paso es dar seguridad del lado del servidor sobre todo si involucraremos bases de datos.
Hasta luego!