Password and confirm password validation in javascript error?

Question

var password = document.getElementById("password");
var confirm_password = document.getElementById("confirm_password");

function validatePassword()
{
  if(password.value != confirm_password.value)
  {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } 
  else if(password.value=='')
  {
    password.setCustomValidity("Passwords must not be empty");
  } 
  else
  {
    password.setCustomValidity('');
  }
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

<input type="password" name="password" id="password" placeholder="Please Enter Password" required="required"/>
<input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password"  required="required"/>

I need to show password empty message while submitting without typing anything.
It validates mismatching but it is not validating empty fields. Any solution?

also note that using the required attribute will cover this validation on most modern browsers. — Jay Lane, Oct 20 '16 at 12:33
Possible duplicate of [How do you check for an empty string in JavaScript?](http://stackoverflow.com/questions/154059/how-do-you-check-for-an-empty-string-in-javascript) — Liam, Oct 20 '16 at 12:36

Jagmeet Kumar · Answer 1 · 2016-10-20T12:42:36.673

1

It must be in this sequence. Check empty value first. try this

    if(password.value=="")
    {
        password.setCustomValidity("Passwords must not be empty");
    } 
    else if(password.value != confirm_password.value)
    {
        confirm_password.setCustomValidity("Passwords Don't Match");
    } 
    else
    {
        password.setCustomValidity('');
    }

edited Oct 20 '16 at 12:42

answered Oct 20 '16 at 12:34

Jagmeet Kumar

9
5

score 0 · Answer 2 · answered Oct 20 '16 at 12:32

Try using like this, with || (or) condition,

<input type="password" name="password" id="password" placeholder="Please Enter Password" required="required"/>
<input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password"  required="required"/>

<script>
    var password = document.getElementById("password");
    var confirm_password = document.getElementById("confirm_password");

function validatePassword()
{
    if(password.value != confirm_password.value)
    {
        confirm_password.setCustomValidity("Passwords Don't Match");
    } 
    else if(password.value == '' || password.value == undefined || password.value == null)
    {
        password.setCustomValidity("Passwords must not be empty");
    } 
    else
    {
        password.setCustomValidity('');
    }
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
</script>

score 0 · Answer 3 · answered Jun 19 '20 at 14:52

Since you're not setting the setCustomValidity() inline in your <input> tag, you can remove even your required attribute and leave all your validations to your JS script (just make sure you handle your submit event properly, e.g. with e.preventDefault()). This is to avoid the default validation from triggering. Secondly, in your logic, your password.setCustomValidity(''); is not resetting at all each time either one of the above two conditions is met.

So for your case, to be safe, try this:

Remove the required attribute and add the oninput attribute:

<input type="password" name="password" id="password" placeholder="Please Enter Password" oninput="this.setCustomValidity('')" />

The oninput="this.setCustomValidity('')" will ensure the custom validity is reset each time you edit the password. Then in your JS code:

function validatePassword()
{
    if(password.value.trim() == "")
    {
        password.setCustomValidity("Passwords must not be empty");
        password.reportValidity();
    } 
    else if(password.value != confirm_password.value)
    {
        confirm_password.setCustomValidity("Passwords Don't Match");
        confirm_password.reportValidity();
    }; /* else
    {
        password.setCustomValidity("");
    } */
}

Note that if you don't change the sequence of your logic, the "Passwords must not be empty" can never be triggered whenever the confirm_password has value -- although it can still trigger the mismatch error. It only works when both are empty.

score -1 · Answer 4 · answered Oct 20 '16 at 12:33

You have to use .reportValidity() for the warning will actually show up.

var password = document.getElementById("password");
var confirm_password = document.getElementById("confirm_password");

function validatePassword()
{
    if(password.value != confirm_password.value)
    {
        confirm_password.setCustomValidity("Passwords Don't Match");
        confirm_password.reportValidity();
    } 
    else if(password.value.trim() == "")
    {
        password.setCustomValidity("Passwords must not be empty");
        password.reportValidity();
    } else
    {
        password.setCustomValidity("");
    }
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

<input type="password" name="password" id="password" placeholder="Please Enter Password" required />
<input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" required />

Password and confirm password validation in javascript error?

4 Answers4