Pjnovas: /* Ver también */

2011-05-05T18:30:27Z

‎Ver también

Página nueva

[[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:

<code html4strict>
<head>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
</head>
</code>

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:

<code html4strict>
<form id="frmSuscripcion" method="post" action="AlgunaAccion.php">
<fieldset>
<legend>Ingrese su nombre, email, url y fecha de nacimiento</legend>
<p>
<label for="cNombre">Name (requerido)</label>
<input id="cNombre" class="required" />
</p>
<p>
<label for="cEmail">E-Mail (requerido)</label>
<input id="cEmail" class="required email" />
</p>
<p>
<label for="cUrl">URL (opcional)</label>
<input id="cUrl" class="url" />
</p>
<p>
<label for="cFechaNac">Fecha Nac. (requerido)</label>
<input id="cFechaNac" class="required date" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</code>

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:

<code javascript>
[...]

<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>
</code>

De esta forma el plugin por si solo validara los controles dependiendo de las clases CSS que tenga asignadas.

==Ver también==
* [[JQuery]]
* [http://docs.jquery.com/Plugins/validation Web Oficial de jQuery Validate]

[[Category:JQuery]]

JQuery Validation - Historial de revisiones

Pjnovas: /* Ver también */