miércoles, 7 de abril de 2010

Agregar Validaciones Personalizadas a JQuery Validator

Me ha sorprendido gratamente el potencial de JQuery y las distintas librerías que le puedes ir agregando, una de estas es Validation, que permite hacer validaciones dentro de los formularios.
Este plugin incluye una serie de validaciones por defecto (email, campo obligatorio, numérico, etc…) y además se pueden agregar nuevas validaciones.



En el ejemplo se puede ver el uso de nuevas validaciones junto a la personalización del mensaje de estas.
Para el ejemplo se usaron las siguientes librerías


formulario.html

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript"
src="js/jquery/lib/validate/jquery.validate.js"></script>

<script type="text/javascript">

$(document).ready(
function() {

/**
* creamos una validacion llamada formato que solo permita un cierto rango de caracteres
* en el campo
*/
jQuery.validator.addMethod("formato", function(value, element) {
return this.optional(element) || /^([a-z]|\d|[ ]|\,)+$/i.test(value);
}, "Error formato");

/**
* Creamos una validacio que no permita duplicidad de valores en ciertos campos
*/
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
return this.optional(element) || value != $(param).val();
}, "No puede repetir el valor en los campos);

/**
* Validacion con una complejidad mayor
*/
jQuery.validator.addMethod("validacionCompleja",function(value, element, param) {
var result = true;
var comparador = $(param).val();
if (value == "" || param == "") {
result = true;
}

if (value.length >= 3 && comparador >= 3) {
result = true;
} else {
result = false;
}
return result;

}, "validacionCompleja");

$("#fvalida").validate(
{
rules : {
campo1 : "required",
campo2 : {
minlength : 1,
notEqualTo : "#campo1",
validacionCompleja : "#campo1",
formato : true,
required : true
}
},
messages : {
campo1 : {
required : "campo requerido"
},
campo2 : {
notEqualTo : "no debe ser igual al campo 1",
minlength : "largo minimo 1",
formato : "caracteres no permitidos",
validacionCompleja : "campo 1 y campo 2 deben tener al menos 3 caracteres"
}
}
});
});

</script>

</head>

<body>

<form action="controlador" method="post" id="fvalida" class="admform">

<fieldset><legend>Prueba Validator</legend>

<ol>

<li><label for="campo1">campo1</label><input type="text"

id="campo1" name="campo1" /></li>

<li><label for="campo1">campo2</label><input type="text"

id="campo2" name="campo2" /></li>

<li><input type="submit" name="Enviar" /></li>
</ol>
</fieldset>
</form>
</body>
</html>



4 comentarios:

Víctor Terán dijo...

La proxima vez que insertes codigo, preocupate porque se vea.

Víctor Terán dijo...

Por cierto, gracias fue el unico ejemplo que funcino de todos los que he encontrado. Pero preocupate por el aspecto visual. No le cae mal a nadie eso

batubn dijo...

jejeje...

de hecho tenia claro el problema... lamentablemente algo pasa en el momento entre la edicion y el grabado que lo cambia de color.

lo revise varias veces sin exito.

y finalmente me di por vencido contra la maquina

Smoo dijo...

Excelente aporte, creo que hay que agradecer en vez de fijarse como puso el código, hay que valorar el trabajo que se tomo en colocar el caso y no en como. No cuesta nada copiar y pegarlo en un lugar donde lo veamos como mas nos guste.