jQuery validation plugin

8 COMENTARIOS - Publicado hace 23 meses - Clasificado en: JQUERY, FORMULARIOS, VALIDACION, JAVASCRIPT

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");
     }
  }); 
});