Validación de formularios con jQuery y validate()

Cuando tenemos que validar los datos de un formulario podemos recurrir a Javascript y crear nuestra función de validación, pero también podemos recurrir a jQuery para validar el formulario de forma rápida y sencilla.

1. Descargar jQuery y el plugin validate.
2. Incluir los ficheros en la cabecera de nuestro código fuente:
   

       <script src="js/jquery.js" type="text/JavaScript"></script>
       <script src="js/jquery.validate.js" type="text/JavaScript"></script>
       <script type="text/JavaScript">
           $(document).ready(function() {
               $('#formV').validate();
           });
       </script>
   

   Como podemos observar, también hemos añadido el código jQuery para que el formulario cuyo id=”formV” sea validado.

3. Escribir nuestro formulario y asignarle un identificador único, en este caso le asignaremos el id=”formV” mencinado en el paso anterior:
   

       <form id="formV" name="form" action="#" method="post">
           <label for="Name" class="italicFont">Name</label><input name="name" type="text" size="50"/>
           <label for="Email" class="italicFont">Email</label><input name="email" type="text" size="50"/>
           <label for="Subject" class="italicFont">Subject</label><input name="subject" type="text" size="50"/>
           <label for="Text" class="italicFont">Text</label><textarea rows="10" cols="10"></textarea>
           <input class="submit" name="submit" type="submit" value="Send" />
       </form>
   

4. Llegados a este punto, deberemos indicar qué campos requieren validación para que, en este caso el plugin validate, pueda llevarla a cabo. Tenemos dos formas de hacerlo:
   1. Asignando una clase required a cada elemento que requiera validación, de forma que si ese campo no cumple las condiciones adecuadas o no es rellenado, será mostrado un aviso de error que nos lo indicará.
      

          <form id="formV" name="form" action="#" method="post">
              <label for="Name" class="italicFont">Name</label><input name="name" type="text" class="required" size="50"/>
              <label for="Email" class="italicFont">Email</label><input name="email" type="text" class="required" size="50"/>
              <label for="Subject" class="italicFont">Subject</label><input name="subject" type="text" class="required" size="50"/>
              <label for="Text" class="italicFont">Text</label><textarea rows="10" cols="10"></textarea>
              <input class="submit" name="submit" type="submit" value="Send" />
          </form>
      

   2. Definiendo un id único para cada campo que requiera validación y, en la cabecera del código fuente, el tipo de validación. Es decir, la cabecera de nuestro código fuente pasará a ser:
      

      <script src="js/jquery.js" type="text/JavaScript"></script>
          <script src="js/jquery.validate.js" type="text/JavaScript"></script>
          <script type="text/JavaScript">
              $(document).ready(function() {
                  $('#formV').validate({
                      rules: {
                          name: {required: true},
                          email: {required: true},
                          subject: {required: true}
                      },
                      messages: {
                          name: {required: "Introduzca su nombre"},
                          email: {required: "Introduzca su email"},
                          subject: {required: "Introduzca el asunto del mensaje"}
                      }
                  });
              });
          </script>
      

      Y el código fuente quedaría de la siguiente forma:

      <form id="formV" action="#" method="post"> <label class="italicFont" for="Name">Name</label><input id="name" name="name" size="50" type="text" />
          <label class="italicFont" for="Email">Email</label><input id="email" name="email" size="50" type="text" />
          <label class="italicFont" for="Subject">Subject</label><input id="subject" name="subject" size="50" type="text" />
          <label class="italicFont" for="Text">Text</label><textarea cols="10" rows="10"></textarea>
          <input class="submit" name="submit" type="submit" value="Send" />
      </form>
      

Podemos emplear muchas más opciones en los campos del formulario, así que si es necesario, en el siguiente enlace podremos encontrar un listado de ellas.

Advertisement