Campos "required" de formularios HTML5 en IE8 y Firefox 3.6

Vuelvo para escribir un tutorial sobre un problema que he tenido que resolver esta mañana por unos formularios de HTML5.

HTML5 trae novedades muy buenas para el uso de formularios que nos simplifican el trabajo, pero que son ignoradas por navegadores como Internet Explorer y versiones antiguas de Firefox.

Para solucionar esto hay varios plugins que a través de jQuery simulan los mismos comportamientos. Como es el caso del plugin jQuery.html5form de Matias Mancini.

El uso de este plugin es extremadamente sencillo. Únicamente vincularemos las librerías de Jquery y Html5 Form, e inicializaremos el formulario:

Código :

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://html5form.googlecode.com/svn/trunk/jquery.html5form-1.4-min.js">
</script>
    
<script>
    $(document).ready(function(){
        $('#formulario').html5form();    
    });
</script>

Con esto ya tendríamos los mismos comportamientos (en principio) de los formularios de HTML5 en navegadores que no soportan estas nuevas características.

EL problema

El problema que me he encontrado utilizando este plugin ha sido con los campos "required" al hacer submit desde un botón que es una imagen:

Código :

//funciona OK
<input type="submit" value="Enviar"/>

//se ignoran los atributos required de html5
<input type="image" src="img/boton.png" alt="Enviar">

En este caso los atributos required son ignorados y el formulario se envía con los datos vacíos...

El problema viene porque en el script sólo se asignan los controladores que detectan los campos requireds a los elementos :submit, con lo que las imágenes envían el formulario de forma normal.

La solución

Esto lo podemos solucionar fácilmente editando un poco el código del script, en la parte donde asignamos los comportamientos a los elementos :submit, también se los asignaremos a los elementos input:image.

Código :

//cambiamos esto:
$.each($(':submit',this),function(){ ... }

//por esto:
$.each(new Array($(':submit',this),$('input:image',this)),function(){ ... }

Y listo! problema resuelto 

Espero a alguien le sea útil.

Fuente