How to style confirm password fields to only show errors after input while preventing Chrome autofill issues? Answered
hello! I'm noticing that the "suggest password" function on chrome based browsers is overriding the visibility settings on my confirm password field. Anyone ever run into this issue and figure out a work around or any suggestions? I've attached a screen shot. My hide/show password function is running from this script
<script> $("#eye_open_password").click(function(){ $("#Password").attr("type", "text"); }); $("#eye_close_password").click(function(){ $("#Password").attr("type", "password"); }); $("#eye_open_confirm_password").click(function(){ $("#ConfirmPassword").attr("type", "text"); }); $("#eye_close_confirm_password").click(function(){ $("#ConfirmPassword").attr("type", "password"); }); </script>
Comments
6 comments
HI Jake,
One sure workaround is to disable the browser's default password suggestion feature. You can achieve this by adding the autocomplete="off" attribute to your password input fields.
Here's how you can modify your HTML:
I hope this helps.
and that won't mess up auto-complete on the other fields?
No, it won't. 🙂
Thanks for your help!
Hey folks! Question.
https://www.memberstack.com/scripts/46-confirm-password
I am trying to style the 'CONFIRM password' field.. It is supposed to be unstylized when there hasn't been anything typed in it. but, if the password isn't styled, THEN it should get red when the passwords arent matching.
As of right now, when i refresh the page, the 'Confirm Password' field is already red without me doing anything with it. I just want it to be white until someone types it in.
thoughts? how to solve this?
Try adding this line of code before the function validatePassword(){
confirm_password.classList.remove("invalid")It should remove the invalid class field until the password has changed.
Please sign in to leave a comment.