The problem is fairly straight forward. I have an HTML log in form, it uses AJAX to validate my login, then if it validates, it sends me onto the page for my internal application. I was running into problems with the browser no longer prompting users to save their password.
I first turned to Stack Overflow and found this thread. They gave me some good direction, but no one had a clear answer. It seems that everyone implements this a little differently. For example, if you’re not redirecting them anywhere after the form is submitted, you need to implement the iFrame solution (I think).
However, what I found out is that in order for the browser to know to prompt you to save your password, it has to be aware of the actual form existing in the HTML. I guess that since I was dynamically injecting my login form after page load, then the browser wasn’t aware of it.
Embed the HTML for your form directly into your HTML page. I still used backbone.js to attach my backbone view to that HTML, but I cut out using the underscore.js template for the form.
- Make sure that your form is still submitting to a real page. In this case, I am using action=”app”
- Make sure that you have name=”username” and name=”password” on your form fields to help the browser know that it’s a log in form
- Attach your AJAX validation to the click event of the form’s submit button, and then once the credentials have been validated, call the submit() method on the form itself.
Let me know if this helps you find a solution. If you think I came up with a good solution, then please take a moment to vote on my answer over at stackoverflow.com.