SummArg | Cursos y recursos para webmasters

Plugin para validar formularios con html5 en todos los navegadores

Matías Mancini publicó un plugin para sacar provecho de la función de validación HTML5 para formularios que no todos los navegadores reconocen. HTML5 puede validar los formularios de manera nativa, el problema es que Internet Explorer, Opera y Firefox todavía no la reconocen. Con el plugin en cuestión este problema se termina, solo basta llamar en el encabezado al plugin de la siguiente manera:

<head>
    //librería jQuery
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    //plugin jQuery.html5form
    <script src="http://html5form.googlecode.com/svn/trunk/jquery.html5form-min.js">
    </script>
    <script>
        $(document).ready(function(){
            $('#myform').html5form();
        });
    </script>
</head>

También pueden obtener el plugin desde esta página. Allí mismo se puede observar un demo con explicaciones básicas para utilizar la validación.

Dentro de las propiedades interesantes en HTML5 podemos ver:

Atributo placeholder: Añade un valor al campo que es borrado automáticamente cuando el usuario clickea en el campo para escribir.

<input type="text" placeholder="Escriba su nombre"/>

Atributo email: Especificando type=email se indica la validación del campo.

<input type="email" name="email" id="email"/>

Atributo URL: Permite reconocer que se trata de una URL y no borra el placeholder cuando se clickea en el campo, sino que posiciona el cursor luego del mismo para facilitar la escritura de la url.

<input type="url" name="sitioweb" placeholder="http://"/>

Atributo required: El campo debe tener contenido al ser enviado.

<input type="text" name="nombre" required />

Para ver mas atributos de formularios en HTML5 ver http://dev.w3.org/html5/html-author/#forms

Características especiales del plugin

Volviendo al plugin de Matías Mancini, dentro de sus características nos encontramos con que permite cambiar el modo de envio por defecto (sincrónico o asincrónico), el método (post o get), la acción (dirección del archivo que lo procesa) y el div de respuesta.

Esto se puede aplicar a múltiples formularios por página, especificando sus propiedades individualmente. Permite también un manejo simple de los colores de los campos, mensajes de error personalizados.

Recuerden visitar el sitio del autor y esperamos que les sea de utilidad!

Dejar un comentario

  1. Hola amigos,

    Muy bueno el artículo. A continuación adjunto un post que complementa vuestra explicación. Se trata de validar formularios HTML5 de forma compatible con todos los navegadores gracias a Modernizr. Gracias por todo y saludos. Allá va:

    http://programarivm.com/2012/01/mi-primera-web-en-html5-iv-validacion-de-formularios-inteligentes-compatible-con-todos-los-navegadores-gracias-a-modernizr/

  2. Nekko

    Muy buen artículo, Jordi

Dejar un comentario