javascript - validar - Autocompletado nativo del navegador para formularios generados dinámicamente(manejados con ajax)

validar formulario javascript html5

Question

Estoy generando dinámicamente una forma. Para simplificar, supongamos que es un formulario de inicio de sesión con correo electrónico / contraseña. El formulario se envía, pero si se envía, se envía una solicitud AJAX que maneja el inicio de sesión real y se cancela el evento de envío ( e.preventDefault() ).

Utilizo e.preventDefault() para cancelar la acción predeterminada del formulario, es decir, ir a la página en ''acción'' pero esto también parece cancelar la detección de autocompletado del navegador.

Creo que necesita cumplir varios requisitos para que el autocompletado nativo funcione:

• El type="text" campo de entrada type="text" debe tener un name
• El formulario debe ser enviado <- esto no está sucediendo realmente en mi caso

¿Mi análisis es correcto y hay alguna manera de hacer un trabajo de autocompletado en este caso?

Para protegerme de los fanboys: no estoy buscando ninguna solución que involucre jQuery o [inserte su marco] , quiero usar la función autocompletar del navegador nativo. No tengo una lista de palabras con las que quiero autocompletar.

Answer 1

Después de jugar un poco con los violines en comentarios sobre las soluciones alternativas de otras respuestas, decidí hacer esta lista para cualquiera que pueda esperar a que los navegadores manejen esto correctamente.

Entonces, como resumen, estas versiones de navegador admiten valores de autocompletado en formularios generados con JavaScript :

• FireFox 25
• Chrome 33 (la versión actual es 31, así que próximamente)
• Internet Explorer 11 ( reference )

Answer 2

La solución de DMos inspiró mucho mi solución, pero hay una diferencia significativa, así que pensé que sería una buena idea hacer mi propia solución, la recompensa va a las DMoses: P

La solución DMoses mueve (o copia) el formulario al iframe y luego lo envía. La razón por la que desea hacer esto es para que su ''padre'' no se vuelva a cargar. Hay una solución más simple: enviar el formulario al iframe . Esto funciona igual y no tienes que copiar ningún nodo.

Este paso es completamente repetible también. El único inconveniente es que no controla cuándo se agrega exactamente una entrada de autocompletado. Es posible que desee agregar solo entradas válidas , pero al menos este caso imita perfectamente la forma en que se comportaría una forma normal si no hubiera ajax involucrado. Si desea controlar lo que se agrega al autocompletar, use la solución de DMoses, copie el formulario y envíelo en el iframe.

Para mí, esto es suficiente:

<form onsubmit="return ajaxit();" autocomplete="on" target="the_iframe">
<input id="foo" name="foo"/>
<input type="submit" />
</form>
<iframe id="the_iframe" name="the_iframe" src="javascript:false"></iframe> <!-- you''ll want this hidden -->

La mejor parte: ¡ no se requiere JavaScript adicional para que esto funcione! (aparte de generar un ID / nombre único para el formulario, pero eso es super trivial).

jsFiddle: http://jsfiddle.net/KzF6s/13/

Answer 3

Ok encontré una forma complicada de hacer esto:

Aquí está el javascript:

function ajaxit() {
var iFrameWindow = document.getElementById("myframe").contentWindow;
iFrameWindow.document.body.appendChild( document.getElementById("myform").cloneNode(true));
var frameForm = iFrameWindow.document.getElementById("myform");
frameForm.onsubmit = null;
frameForm.submit();
return false;
}

Aquí está el html:

<form id="myform" onsubmit="return ajaxit();" autocomplete="on">
<input id="foo" name="foo"/>
<input type="submit" />
</form>
<iframe id="myframe" src=""></iframe> <!-- you''ll want this hidden -->

Al hacer clic en enviar ejecutará el método ajaxit (). el método crea el mismo formulario en un iframe y lo envía al servidor. Puede hacer un piggyback que envíe para hacer su solicitud del servidor o puede hacer una solicitud ajax por separado e ignorar el iframe.

Sé que es feo, pero funciona.

EDITAR: Aquí hay un jsbin para jugar.