[JQuery] Validar un formulario

Hace dias me tope con la necesidad de validar un fomulario  con JavaScript , investigando por ahi me encontre con este plug in para JQuery que la verdad esta muy facil de usar y muy rápido de implementar.

Lo que se necesita para hacer la validación

• Libreria de jQuery Descargar
• Libreria del Plug in Validate Descargar

ya con eso descargado hacemos un pequeño ejemplo.

En un archivo HTML “prueba.html”, agregamos el sig. código.

1.-  La referencia a las librerias. (yo renombre las librerias para que se vieran más limpios los include)

<script src="includes/jquery.js"><!--mce:0--></script>
<script src="includes/jquery.validate.js"></script>

2.- creamos el formulario.

<form name="frmDatos" id="frmDatos">
  <table>
     <tr>
       <td>
          <input type="text" name="nombre" id="nombre" />
       </td>
     </tr>
     <tr>
       <td>
          <input type="text" name="mail" id="mail" />
       </td>
     </tr>
     <tr>
        <td>
           <input type="text" name="edad" id="edad" />
        </td>
     </tr>
  </table>
  <input id="buton"type="submit" value="Enviar" />
 </form>

3.- Se crea la función que realiza la validación. (Que realmente es muy facil , usando los id de los campos le indicamos el tipo de validación)

$(document).ready(function() {
       $("#frmDatos").validate({
              rules: {
                      nombre: "required",
                      mail: {required: true,email: true},
                      edad: {number: true}
                     },
           messages: {
                      nombre: "Nombre incorrecto",
                      mail : "Email no Valido",
                      edad : "Edad Incorrecta"
                      }
        });
 });

En este caso tambien personalizamos el mensaje con el que muestra el error, ya que si no usamos este mensaje el plug-in cuenta con mensajes pero en ingles.

Ya para terminar , se crea una clase de estilo para darle formato al mensaje a mostrar.

<style>
 .error-message, label.error {
    color: #ff0000;
    margin:0;
    display: inline;
    font-size: 1em !important;
    font-weight:lighter;
 }
 </style>

Espero y esto le pueda servir a alguien como a mi Saludos !!

aqui pongo el link de Descarga de este sencillo ejemplo.

Advertisement