JQuery Validation
JQuery Validation es un plugin para la librería JavaScript JQuery que agrega diversa funcionalidad para la validación de formularios.
Como utilizarlo bajo clases CSS
Primero hay que registrar la libreria de jquery y luego la del plugin en el head:
<head>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script>
</head>
Luego lo que necesitariamos es un formulario a validar, pero a cada elemento del formulario le asignamos una clase CSS para identificar el tipo de validacion que va a necesitar cada control:
<form id="frmSuscripcion" method="post" action="AlgunaAccion.php">
<fieldset>
<legend>Ingrese su nombre, email, url y fecha de nacimiento</legend>
<label for="cNombre">Name (requerido)</label> <input id="cNombre" class="required" />
<label for="cEmail">E-Mail (requerido)</label> <input id="cEmail" class="required email" />
<label for="cUrl">URL (opcional)</label> <input id="cUrl" class="url" />
<label for="cFechaNac">Fecha Nac. (requerido)</label> <input id="cFechaNac" class="required date" />
<input class="submit" type="submit" value="Submit"/>
</fieldset>
</form>
En este caso le asigne la class "required" a los que son requeridos y algunas ya pre establecidas por el plugin como por ejemplo el "email", "url" y "date" para que los valide como tales.
Lo unico que nos quedaria es implementar el plugin para que valide a traves de esas clases css. Por lo que en nuestro head agregamos lo siguiente:
[...]
<script type="text/javascript">
//Evento que se dispara cuando el DOM esta listo para ser utilizado
$(document).ready(function() {
//Seteo los CSS Class en el validador para que actuen segun su validacion
$.validator.addClassRules({
'required': {
required: true
},
'date': {
date: true
},
'email': {
email: true
},
'url': {
url: true
}
});
//Extiendo por jQuery los mensajes del plugin validador
//(sobre-escribo los ya existentes)
$.extend($.validator.messages, {
required: "Campo requerido",
date: "Fecha no valida",
email: "E-mail incorrecto",
url: "URL incorrecta"
});
// Inicio el plugin
$("#frmSuscripcion").validate();
});
</script>
</head>
De esta forma el plugin por si solo validara los controles dependiendo de las clases CSS que tenga asignadas.
