JQuery Validation Plugin :
JQuery Validation es un plugin muy sencillo de utilizar y que tiene la ventaja de ser muy personalizable tanto en la funcionalidad, como en las reglas de validación. El propósito de este tutorial es con unas pocas líneas de Javascript especificar el formulario y aplicar el plugin de validación. Las reglas de validación se espcifican a nivel de metadatos -a nivel general especificando clases-.
Algunas consideraciones a nivel general:
1- Después de enviar un formulario no valido, el primer elemento no válido del mismo recoge el foco; lo que permite al usuario corregir su error. En el caso de que el campo donde se encontraba el usuario, antes de enviar el formulario, sea inválido, éste mantendrá el foco aunque no sea el primer campo erroneo. De este modo el usuario podrá corregir primero éste campo, facilitando la usabilidad del formulario.
2.- Antes de que el formulario sea enviado, el plugin no valida por lo que el usuario puede navegar por los distintos campos del formulario evitando molestos mensajes.
3.- Una vez el el campo ha sido marcado como no válido el plugin se vuelve activo y valida tan pronto como el usuario introduce los datos. De este modo, cuando el usuario ha introducido el valor correcto, el mensaje de error desaparece sin necesidad de esperar al nuevo envio del formulario.
Los métodos de validación cubren la mayoría de las necesidades que uno puede tener. En cualquier caso, siempre existe la posibilidad de añadir nuestros propios métodos de validación de un modo sencillo. Los métodos implementados por defecto son:
| Name | Type |
|---|---|
| required( ) | Returns: Boolean |
| Makes the element always required. | |
| required( dependency-expression ) | Returns: Boolean |
| Makes the element required, depending on the result of the given expression. | |
| required( dependency-callback ) | Returns: Boolean |
| Makes the element required, depending on the result of the given callback. | |
| remote( url ) | Returns: Boolean |
| Requests a resource to check the element for validity. | |
| minlength( length ) | Returns: Boolean |
| Makes the element require a given minimum length. | |
| maxlength( length ) | Returns: Boolean |
| Makes the element require a given maxmimum length. | |
| rangelength( range ) | Returns: Boolean |
| Makes the element require a given value range. | |
| min( value ) | Returns: Boolean |
| Makes the element require a given minimum. | |
| max( value ) | Returns: Boolean |
| Makes the element require a given maximum. | |
| range( range ) | Returns: Boolean |
| Makes the element require a given value range. | |
| email( ) | Returns: Boolean |
| Makes the element require a valid email | |
| url( ) | Returns: Boolean |
| Makes the element require a valid url | |
| date( ) | Returns: Boolean |
| Makes the element require a date. | |
| dateISO( ) | Returns: Boolean |
| Makes the element require a ISO date. | |
| dateDE( ) | Returns: Boolean |
| Makes the element require a german date. | |
| number( ) | Returns: Boolean |
| Makes the element require a decimal number. | |
| numberDE( ) | Returns: Boolean |
| Makes the element require a decimal number with german format. | |
| digits( ) | Returns: Boolean |
| Makes the element require digits only. | |
| creditcard( ) | Returns: Boolean |
| Makes the element require a creditcard number. | |
| accept( extension ) | Returns: Boolean |
| Makes the element require a certain file extension. | |
| equalTo( other ) | Returns: Boolean |
| Requires the element to be the same as another one | |
Un primer ejemplo:
La manera más sencilla de especificar reglas de validación es añadiendo clases a los elementos de formulario.
<form class="cmxform" id="commentForm" method="post" action="#"> <fieldset> <div id="warning"></div> <h5>Ejemplo de maquetación de un formulario </h5> <p> <label>Nombre <span class="indicacionform">(requerido)</span></label> <input name="name" class="required" id="idname" size="35"/> </p><p> <label>E-Mail <span class="indicacionform">(requerido)</span></label> <input name="email" class="required email" id="idemail" size="35"/> </p><p> <label>URL <span class="indicacionform">(opcional)</span></label> <input name="url" class="url" id="idurl" value="" size="35" /> </p><p> <label >Tu comentario <span class="indicacionform">(requerido)</span></label> <textarea name="comentarios" cols="30" rows="7" class="required" id="idcomentarios"></textarea> </p><p align="center"> <input name="submit" type="submit" class="submit" value=""/> </p> </fieldset> </form>
Aunque las clases "required", "email" y "url" pueden ser usadas para dar estilo a los elementos con CSS, no es éste su propósito.
Para validar el formulario necesitamos incluir los archivos necesarios en nuestra página:
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.delegate.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script>
Ahora únicamente nos queda activar la función de validación, llamándola y estableciendo cuál es el id del formulario a validar.
<script language="javascript">
$(document).ready(function() {
$("#commentForm").validate();
});
</script>
Un ejemplo más elaborado en cuanto a la utilización del jQuery y de CSS, a partir del XHTML anterior:
CSS:
form.cmxform {
width: 400px; /*Ancho del formulario*/
color: #666;
font: 12px "Lucida Sans Unicode", Verdana, Arial;
color: #666;
border:1px solid #d8dff2;
background-color: #F8FDEF;
padding:0px;
margin:0px;
}
form.cmxform label {
float: left;
width: 160px; /*Ancho de la primera columna*/
}
form.cmxform fieldset {
border: none;
margin:0px;
padding:0px;
background: url(Imagenes/fieldset.gif) left bottom repeat-x;
background-color: #F8FDEF;
}
form.cmxform fieldset fieldset {
background: none;
}
form.cmxform h5 {
margin:0px;
padding:10px;
color:#336699;
}
form.cmxform fieldset p, form.cmxform fieldset fieldset {
padding: 10px 10px 10px;
background: url(Imagenes/divisor.gif) left top repeat-x;
}
.indicacionform {
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #336699;
}
/* ELEMENTOS INPUT, TEXTAREA, SELECT,... */
textarea, input {border: 2px solid #d5dae7; font: 11px "Lucida Sans Unicode", Verdana, Arial; color: #666;}
textarea:focus, input:focus{ border: 2px solid #89b21b; }
input.error { border: 2px solid #ffa17f; }
/* BOTONES*/
form .submit {
display:block;
width:68px;
height:25px;
background-image:url(Imagenes/Submit.gif);
border:none;
}
/* CONTEO TOTAL DE ERRORES*/
#warning {
margin:15px;
padding:7px;
text-indent:5px;
border:1px solid #b8c4e6;
background: #e6eaf5 url(Imagenes/alert.gif) no-repeat 3px center;
color:#336699;
font-weight:bold;
padding-left:20px;
}
#warning {
display:none;
}
/* ETIQUETAS DE ERROR Y OK A NIVEL DE ELEMENTO*/
em.error {
display:block;
height:10px;
background:url("Imagenes/error.gif") no-repeat 0px 0px;
padding-left:15px;
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #ff5432;
}
em.success {
display:block;
height:10px;
background:url("Imagenes/ok.gif") no-repeat 0px 0px;
padding-left:15px;
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #336699;
}
Javascript:
$(document).ready(function() {
$("#commentForm").validate ( {
showErrors: function(errorMap, errorList) {
$("#warning").html("Tu formulario contiene " + this.numberOfInvalids() + " errores.");
this.defaultShowErrors();
},
debug: false,
errorElement: "em",
errorContainer: $("#warning"),
success: function(label) {
label.text("ok!").addClass("success");
}
});
});
