Validity API

JavaScript
1

I am using validity API based on pattern I provided on each input field. works like chart but problem I am encountering now is that I have 2 input fields for passwords (type and retype password) and since I cant provide pattern for this I will have to compare the two and obviously since each of the properties are read only how would I go about doing this.

I was thinking something along these line

  if pass1 == pass2
   set validity to true;
 else 
   set validity to false;

Is there something like this I could accomplish using this API.

2

Can we get further details about the validity API that you are using?

3

You can’t modify the validity state directly since all its properties are read only (see here). I guess the easiest way would be to just compare the two input values manually… but if you need the 2nd input to be actually invalid (so that say .checkValidity() on the form returns false), you can set the .pattern of the 2nd input whenever the value of the 1st one changes:

var password = document.querySelector('.password')
var retypePassword = document.querySelector('.retype-password')

// The pattern is a regular expression, so the value
// needs to be escaped... function borrowed from
// https://github.com/sindresorhus/escape-string-regexp
var escape = function (string) {
  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
}

password.addEventListener('change', function () {
  retypePassword.pattern = escape(password.value)
})
4

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