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:
La proxima vez que insertes codigo, preocupate porque se vea.
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
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
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.
Publicar un comentario