Form with password input

JavaScript
1

I have form which I check for valid input etc. If something is wrong with the form I will call preventDefault() method on submit event and therefore form will not be submitted yet Firefox still shows me pop up box prompting me to save password.

Would you like Firefox to save this login

Can I disable this window with JS?

Thanks

2

It is not possible to change that aspect of web browsers, because there is too much bad potential that might come from it.

3

Yeah I can see that but it is confusing that you still can see that box even in cases when passwords are not matching and therefore form is not submitted. In this situation user can save passwords that are not even submitted anywhere

4

What triggers Firefox to save the password? I can’t get it to trigger on this test page, for example.

Edit:

This updated code triggers it https://jsfiddle.net/c59nfw3f/12/

5

I can get it to pop for me if the type attribute of the field is set to password.

6

Ahh good, we have some working test code for that at https://jsfiddle.net/c59nfw3f/12/

I can confirm, that you can’t stop Firefox from asking if the password should be saved.
All I can recommend in that regard is that you make it very clear to the user that the password wasn’t correct, to help encourage them to not save the bad password.

7

I haven’t tested, but I wonder if using the autocomplete attribute might also affect the save.

AFAIK, the “save?” is a browser thing and would depend on a users preferences, not a web page.

8

I think your input type needs to be password

1 Like
9

Firefox won’t ask you to save the password if the form is actually invalid though. I think there are 2 possibilities to require the passwords to match; one would be to check if the values are equal manually and .setCustomValidity() if not:

const form = document.querySelector('form')
const [password1, password2] = form.querySelectorAll('[type="password"]')

form.addEventListener('input', () => {
  if (password1.value !== password2.value) {
    password2.setCustomValidity('The passwords must match!')
  } else {
    password2.setCustomValidity('')
  }
})

form.addEventListener('submit', e => {
  e.preventDefault()
  // ...
})

(fiddle)

Another would be to dynamically change the pattern property of the 2nd password field when the 1st one changes:

const form = document.querySelector('form')
const [password1, password2] = form.querySelectorAll('[type="password"]')

password1.addEventListener('change', () => {
  // Escape regular expression special charcaters for the pattern...
  password2.pattern = password1.value.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
})

form.addEventListener('submit', e => {
  e.preventDefault()
  // ...
})

(fiddle)

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.