Dos Punto Cero (BETA)

Para los que estamos comenzando en el mundo de la programación Web, debemos tener en cuenta algunas de los paradigmas que se siguen actualmente para el desarrollo, uno de ellos es el llamado DRY (acrónimo para Don't Repeat Yourself - No te repitas) , dicho mas coloquialmente como "No reinventes la rueda". A la hora de validad nuestros formularios podemos encontrar numerables herramientas que nos pueden ayudar, una de esas herramientas es Live Validation. Es una iniciativa de software libre desarrollada en JavaScript bajo licencia MIT . Les recomiendo visitar su sitio Web, alli pueden descargarlo y conseguir amplia documentación sobre el script. Sin más preambulo les dejo un breve tutorial para un formulario básico:

var nombre = new LiveValidation('nombre');
nombre.add( Validate.Presence , { failureMessage: "No puede estar vacio"});

edad = newLiveValidation ('edad');
edad.add(Validate.Numericality,{onlyInteger:true,
                                notAnIntegerMessage:'Debe ser un entero', 
                                notANumberMessage:'Debe ser un numero'});

var sexo = new LiveValidation('sexo');
sexo.add( Validate.Inclusion, { within: [ 'M' , 'F' ] , 
failureMessage: 'Debe ser M ó  F' , 
caseSensitive:false} );

var email = new LiveValidation('email');
email.add( Validate.Email , {failureMessage: "Direccion de Correo Invalida"} );
email.add( Validate.Presence, { failureMessage: "No puede estar vacio" } );

var password = new LiveValidation('password2');
password.add(Validate.Confirmation, { match: 'password1' , failureMessage: 'Contraseñas no coinciden' } );
password.add(Validate.Presence, { failureMessage: "No puede estar vacio" } );

var check = new LiveValidation('check');
check.add( Validate.Acceptance, {failureMessage: 'Debes aceptar los terminos y condiciones'} );

• También pueden añadirle estilos utilizando las clases predefinidas de LiveValidation, en su sitio Web, proporcionan el siguiente estilo:
  .LV_validation_message{
font-weight:bold;
margin:0 0 0 5px;
}

.LV_valid {
color:#00CC00;
}

.LV_invalid {
color:#CC0000;
}

.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
border: 1px solid #00CC00;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
border: 1px solid #CC0000;
}
  Esto debe ser añadido dentro de una etiqueta 'style'
  que va dentro de la etiqueta 'head'.
• Para modificar el mensaje de campo correcto "ThankYou", abran el archivo que descargaron con un editor de texto, busquen la frase y reemplacenla por la que quieran:
  
  
  
  
  
• Desventaja: Validación no restrictiva, deberás confiar en que el usuario notará los errores y no enviará el formulario, o hacer una validación restrictiva aparte. A pesar de esa desventaja sigue siendo una opción muy rica visualmente.
• Espero que les guste mi artículo, considerar que se fué la luz cuando iba a mitad de todo y tuve que hacer algunas cosas de nuevo.
• No dudes en dejar un comentario y si te gustó, dile a tus amigos!