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>