Yes, I know my passwords do not match, I'm still typing them! [closed]

Question

This picture shows me typing in my confirmation password when I sign up:

My response? Yes, I know my passwords do not match, I'm still typing them!

Why does this show all the time, and not just after you have clicked off the box, if they don't match?

Or, an alternative solution:

Maybe they should only show if they match or not, once the second password's length is >= to the first password's length.

-- Roombatron5000

Another solution:

Or do what some sites do: background red in the second box until/unless they match. Then it's not obtrusive but is easy to implement.

--Joe

UX links:

Telling users passwords don't match and aren't strong enough

When registering should the passwords match/don't match still be shown if the initial password isn't strong enough

When should I validate that the password in a confirmation field matches the first password entered?

Answer 1

Seems reasonable to show message first time only after blur event.

But then (if they didn't match) I actually would prefer message to be rechecked on every input after I return into the field. You can try it in a snippet:

~function () {
  var a = document.getElementById('a'), b = document.getElementById('b')
  var msg = document.getElementById('msg')

  function updateValidity() {
    msg.hidden = a.value === b.value
  }

  b.addEventListener('blur', function onBlur(e) {
    updateValidity()

    b.removeEventListener('blur', onBlur)

    a.addEventListener('input', updateValidity)
    b.addEventListener('input', updateValidity)
  })
}()

<p><input type=password id=a>
<p><input type=password id=b> <span id=msg hidden>Passwords don't match</span>

And about proposal with checking length - it's a bad idea as I can just miss a char when entering the second value. I have to know they didn't match in that case too.