¿Cómo hacer que Chrome recuerde la contraseña de un formulario AJAX?

Estoy usando AJAX para la validación de entrada rápida en mi página de inicio de sesión. Si todo es correcto, se redirige al usuario.

Aquí está el código:

$(form).submit(function () { $.post($(this).attr('action'), $(this).serialize(), function (data) { if (data.status == 'SUCCESS') { window.location = data.redirectUrl; } } ... 

Funciona muy bien en todos los navegadores. Pero hay un problema en Chrome. No ofrece guardar la contraseña.

Cuando JavaScript está desactivado, la contraseña se guarda, por lo que definitivamente el problema está en la redirección a una nueva ubicación.

¿Cómo puedo arreglar eso?

He encontrado una solución sucia para este problema, al insertar un iframe invisible y dirigirlo al formulario:

  

El JavaScript correspondiente:

 $('#loginForm').submit(function () { $.post('/login', $(this).serialize(), function (data) { if (data.status == 'SUCCESS') { window.location = data.redirectUrl; } }) }) 

El truco es que realmente hay dos solicitudes hechas. Primero, el formulario se envía a /blank.html, que será ignorado por el servidor, pero esto activa el diálogo para guardar la contraseña en Chrome. Además, hacemos una solicitud de Ajax y enviamos el formulario real a / login. Como el objective de la primera solicitud es un iframe invisible, la página no se actualiza.

Esto es, por supuesto, más útil si no desea redirigir a otra página. Si desea redirigir de todos modos, cambiar el atributo de acción es una mejor solución.

Editar:

Aquí hay una versión simple de JSFiddle . Contrariamente a las afirmaciones en la sección de comentarios, no hay recarga de la página necesaria y parece funcionar de manera muy confiable. Lo probé en Win XP con Chrome y en Linux con Chromium.

¿Puede cambiar el valor de action del formulario a data.redirectUrl y dejar que el formulario se envíe como de costumbre? Esto debería activar la solicitud del navegador para guardar el nombre de usuario y la contraseña.

 $(form).submit(function () { $.post($(this).attr('action'), $(this).serialize(), function (data) { if (data.status == 'SUCCESS') { $("form#name").attr('action', data.redirectUrl); } } ... 

Lea aquí: ¿por qué Chrome no reconoce este formulario de inicio de sesión? .

El comentario importante es:

Sí, no funciona cuando quites return return false. Necesitarás reescribir tu código. Chrome no ofrece guardar contraseñas de formularios que no están “enviados” como una característica de seguridad. Si desea que la característica Guardar contraseña funcione, tendrá que abandonar todo el elegante inicio de sesión de AJAX.

Entonces, quizás podría considerar eliminar el Ajax y simplemente dejar que el Formulario se publique para iniciar sesión, esta será probablemente la única forma en que los Usuarios que no tengan JavaScript habilitados también puedan iniciar sesión con su formulario.

Lo he arreglado de esta manera:

 

Y el JavaScript:

 $(form).submit(function () { if(-1 !== this.action.indexOf('/login')) { var jForm = $(this); $.post(this.action, $(this).serialize(), function (data) { if (data.status == 'SUCCESS') { // change the form action to another url jForm[0].action = data.redirectUrl; // and resubmit -> so, no AJAX will be used // and function will return true jForm.submit(); } }); return false; } } 

En mi caso, Chrome no recordaba la contraseña porque había dos entradas diferentes de tipo contraseña en una forma (crear / iniciar sesión en una forma). El problema en mi caso se resolvió mediante el uso de la manipulación de javascript para eliminar una de las entradas de tipo contraseña para que el navegador pudiera decidir qué campos enviados contienen datos de credenciales.

Descubrí que los campos de ingreso de nombre de usuario y contraseña deben tener la etiqueta de nombre establecida para que Chrome ofrezca guardar la contraseña. Este hilo trata de formularios simples, pero el mismo arreglo mi formulario jquery AJAX.

Desde ayer, 10/07/2013, Chrome 28, ahora es posible sin ningún truco. Parece que arreglaron eso …