Sisyphus: Que tus usuarios no pierdan la información de los formularios

¿Cuántas veces estamos llenando un formulario largo y por alguna razón perdemos la información? Desde que crashea el explorador, un corte de luz, cerrar la pestaña/ventana sin querer… ¿no sería genial, como desarrolladores, darle una solución a los visitantes de nuestros sitios webs ante ese problema?

Ahí es cuando Sisyphus nos viene a salvar. Un ligerísimo plugin de jQuery (3.5KB) que nos permite guardar localmente la información llenada en el formulario para no perderla. La data ingresada se guarda automáticamente al interactuar con los campos, no hace falta que el formulario se envíe ni mucho menos. Y su implementación es facilísima:

^?Ver código PHP

1	$('#form1, #form2').sisyphus();

Eso guardaría la información de los formularios identificados con los ids form1 y form2. Si quisiéramos aplicárselo a todos los formularios, tranquilamente podríamos hacer:

^?Ver código PHP

1	$('form').sisyphus();

El plugin permite personalizar ciertas opciones, como el tiempo durante el que se guarda la información, si queremos que se realice una acción cuando se guarda o cuando se obtiene, etc.

Una forma muy útil de ahorrarle dolores de cabeza a tus visitantes, si es que tu sitio web tiene algún formulario tedioso de llenar.

Fuente

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