Validacion de Formularios con Javascript

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

<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!