jQuery.html5form

HTML5 valida de manera nativa los formularios, no requiere JavaScript.
Actualmente solo las últimas versiones de Firefox, Safari & Google Chrome soportan esta funcionalidad.
Este plugin logra lo mismo en todas las versiones de Internet Explorer y Firefox 3.6.
Con una sola línea de código...

HTML5 Form jQuery

Cómo se utiliza?

 
//Librería jQuery (Funciona con jQuery 1.4 y superiores)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
//Plugin jQuery.html5form
<script src="http://html5form.googlecode.com/svn/trunk/jquery.html5form-1.5-min.js"></script>
    
<script>
    $(document).ready(function(){
        $('#myform').html5form();    
    });
</script>

html5form v1.5

04-12-2011 - Agregado Soporte para input type="image" & input type="button" (Gracias @zguillez)

Cómo funciona?

Solo debe crear su formulario siguiendo el estándar HTML5 y el código se ejecutará de manera automática.
No requiere clases adicionales. El plugin toma la información que necesita del código HTML.
Se activa de manera automática cuando detecta Internet Explorer, Opera o Mozilla Firefox.
Para personalizar el comportamiento de las funciones y activarlo en todos los navegadores consultar las Características propias del plugin a continuación.

Funcionalidades HTML5.

Atributo placeholder
<input type="text" placeholder="Nombre Completo"/>
Completa automáticamente un valor por defecto para cada campo que desaparece al momento de escribir.
Atributo de tipo email
<input type="email" name="email" id="email"/>
Indica al navegador que el campo contiene un email y lo valida con expresiones regulares.
Atributo maxlength en Textarea
<textarea maxlength="60" name="consulta" id="consulta"/>
Este atributo conocido limita la cantidad de caracteres permitidos pero no estaba disponible para campos Textarea hasta ahora.
Atributo required
<input type="text" name="nombre" required />
Indica al navegador que el campo no puede quedar vacío al momento de enviar el formulario.
Este atributo no lleva =" ", solamente se nombra dentro de la etiqueta.
Atributo url
<input type="url" name="sitioweb" placeholder="http://"/>
En conjunto con el atributo placeholder, se agrega un valor por defecto. El plugin reconoce que se trata de una url mediante type="url".
Al hacer click en el campo situa el puntero luego del prefijo http:// sin borrarlo.
Atributo Autocomplete
<input type="text" name="nombre" autocomplete="off"/>
Evita que el navegador despliegue una lista de datos cargados anteriormente al seleccionar el campo.

Características propias del plugin.

Personalizar el comportamiento de envío.
El formulario se envía de manera asincónica por defecto, mediante una petición Ajax al hacer click en el botón submit.
Para esto, el plugin consulta automáticamente los atributos method y action declarados en el formulario.
Para omitir el envío por defecto solo debe definir la propiedad async como false.
Si desea cambiar alguno de estos comportamientos puede hacerlo de la siguiente manera.
<script>
    
    $('#myform').html5form({
        
        async : false, // cancela el método de envío por defecto.
        method : 'GET', // cambia el request method.
        action : 'respuesta.php', // cambia el action del formulario.
        responseDiv : '#respuesta' // define un contenedor para mostrar el resultado de la petición Ajax.
        
    })
    
</script>
Múltiples formularios.
En caso de contar con más de un formulario, puede definir distintas opciones para cada uno, llamando método .html5form() con su '#id'.
En el caso de utilizar directamente la etiqueta 'form', el plugin controlará de manera independiente cada formulario pero las opciones serán iguales para todos, se sugiere hacer una llamada individual por cada formulario como muestra el ejemplo.
<script>

    $('#myform_uno').html5form({
        method: 'POST',
    });

    $('#myform_dos').html5form({
        method: 'GET'
    });

</script>
Colores del texto.
Permite personalizar los colores por defecto del texto en los campos.
<script>
    
    $('#myform').html5form({
    
        colorOn: '#999',
        colorOff: '#000'
    
    })
    
</script>
Mensajes de error.
El plugin puede mostrar un error descriptivo en el caso de encontrar campos vacíos o un email incorrecto.
Esta verificación se realiza al momento de enviar el formulario y se encuentra deshabilitada por defecto.
El plugin cuenta con mensajes predeterminados en Inglés, Español, Italiano, Alemán, Francés, Holandés y Portugués que se activan con la propiedad messages y el código del pais.
Otro método para hacerlo, es asignando un valor para cada respuesta en las propiedades emptyMessage y emailMessage.
<script>
    
    //mensajes predeterminados en Español
    $('#myform').html5form({
    
        messages : 'es', // Opciones 'en', 'es', 'it', 'de', 'fr', 'nl', 'be', 'br'
        responseDiv : '#respuesta'
    
    })
    
    //método personalizado. tiene prioridad sobre los mensajes predeterminados
    $('#myform').html5form({
    
        emptyMessage : 'Este campo es obligatorio',
        emailMessage : 'La dirección de correo ingresada es incorrecta',
        responseDiv : '#respuesta'
    
    })
    
</script>
Esta funcionalidad tiene 3 condiciones:
  • El envío debe permanecer en modo asincrónico.
  • Cada input / textarea debe contar con su atributo title.
  • El contenedor de respuesta responseDiv debe estar declarado en la llamada al método.

Si desea contribuir con una traducción a otro idioma puede contactarse via email.

Ocultando labels.
El atributo placeholder de HTML5 es sin duda alguna, muy intuitivo y fácil de implementar.
Sin embargo debemos contemplar a los usuarios que no permiten JavaScript en sus navegadores y no descuidar la semántica HTML.
Es por eso que se recomienda mantener las etiquetas label para describir cada input como se hacia hasta ahora.
Pero se incluye una funcionalidad que las elimina, evitando texto redundante y repetido. De esta manera, si un usuario accede a su formulario con JavaScript deshabilitado, no se encontrará con campos vacíos sin referencias.
<script>

    $('#myform').html5form({
        labels: 'hide'
    });

</script>
Activar en todos los Navegadores.
Como mencionabamos anteriormente, los navegadores WebKit (Safari & Chrome) reconocen los nuevos formularios de manera nativa y no activan el plugin por defecto.
Sin embargo, podemos forzarlo a trabajar en todos los navegadores para contar con las Características propias.
<script>

    $('#myform').html5form({
        allBrowsers: true
    });

</script>

html5form v1.5

04-12-2011 - Agregado Soporte para input type="image" & input type="button" (Gracias @zguillez)

Navegadores compatibles:

  • Internet Explorer: IE6+
  • Mozilla Firefox: 3.6+
  • Google Chrome: 10+
  • Apple Safari: 4+
  • Opera: 10+

Developer Version 1.5