[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.

[JQuery]Enmascarar una Hora, con JQuery usando Masked Input Plugin

Primero nos descargamos las librerías necesarias,

1. JQuery
2. Masked Input Plugin (librerias del plugin para jquery).

Creamos una página HTML para probar el ejemplo (lo más sencillo posible).

Incluimos las librerías :

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jquery.maskedinput.js"></script>

agregamos un input :

<input type="text"  id="time">

y agregamos nuestro script , donde estamos generando nuestras propias definiciones,

esto porque el pluging solo cuenta con 3 definiciones.

• 9 – para números del 0-9
• a – para letras de la A-Z y a-z
• * – para alfanuméricos

   jQuery(function($)
   {
      $.mask.definitions['H']='[012]';
      $.mask.definitions['N']='[012345]';
      $.mask.definitions['n']='[0123456789]';
      $("#time").mask("Hn:Nn:Nn");
    });

Solo que en este caso no estaría , totalmente validada porque se podriá dar el caso de una hora (24:50:10 ó 25:00:00) y eso no es correcto ! 🙂

Para solucionar esto se hace una función con la que se valida que sea correcta y la colocamos en el onblur del input.

<input type="text" id="time" onblur="valida(this.value);">

y la función seriá como esta.

function valida(valor)
{
   //que no existan elementos sin escribir
   if(valor.indexOf("_") == -1)
   {
      var hora = valor.split(":")[0];
      if(parseInt(hora) > 23 )
      {
           $("#time").val("");
      }
   }
}

y Listo 😀

el código del ejemplo esta en esta LIGA por si desean descargarla.