Validacion de Formularios con Javascript

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


¿Sabías que?

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

Validacion de Formularios con Javascript

Clic para valorar esta información
[Total: 0 Promedio: 0]