javascript错误中的密码和确认密码验证？

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?

Answer 1

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>

Answer 2

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('');
    }

Answer 3

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, eg 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 .

Answer 4

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 />