JavaScript password and password confirmation match

Question

I am not able to match the passwords, before Submit is clicked. The submit goes even if the passwords are different.

 var pass1 = document.getElementById('userPassword'); var pass2 = document.getElementById('userRepeatPassword'); function validatePassword(){ if (pass2.value == pass1.value) { pass2.setCustomValidity(''); } else { pass2.setCustomValidity('Both passwords do not match'); } } pass1.addEventListener('change', validatePassword); pass2.addEventListener('keyup', validatePassword);

 <form method="POST" action="login.php"> <div class="form-group"> <label for="inputFirstName">First name:</label> <input type="text" class="form-control" name="firstName" id="inputFirstName" required> </div> <div class="form-group"> <label for="inputLastName">Last name:</label> <input type="text" class="form-control" name="lastName" id="inputLastName" required> </div> <div class="form-group"> <label for="inputEmail">Email address:</label> <input type="email" class="form-control" name="email" id="inputEmail" required> </div> <div class="form-group"> <label for="inputPassword">Password:</label> <input type="password" class="form-control" name="userPassword" id="userPassword" required> </div> <div class="form-group"> <label for="inputRepeatPassword">Password repeat:</label> <input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button> </div> </form>

It seems like I miss something, but I am not able to find it whole day already - any thoughts will be appreciated!

Answer 1

The validate should return the validation status and the form's onsubmit event handler should be able to react. Here's the sample:

 var pass1 = document.getElementById('userPassword'); var pass2 = document.getElementById('userRepeatPassword'); function validatePassword() { var status = false; if (pass2.value == pass1.value) { status = true; pass2.setCustomValidity(''); } else { pass2.setCustomValidity('Both passwords do not match'); } return status; } pass1.addEventListener('change', validatePassword); pass2.addEventListener('keyup', validatePassword);

 <form method="POST" action="login.php" onsubmit="return validatePassword();"> <div class="form-group"> <label for="inputFirstName">First name:</label> <input type="text" class="form-control" name="firstName" id="inputFirstName" required> </div> <div class="form-group"> <label for="inputLastName">Last name:</label> <input type="text" class="form-control" name="lastName" id="inputLastName" required> </div> <div class="form-group"> <label for="inputEmail">Email address:</label> <input type="email" class="form-control" name="email" id="inputEmail" required> </div> <div class="form-group"> <label for="inputPassword">Password:</label> <input type="password" class="form-control" name="userPassword" id="userPassword" required> </div> <div class="form-group"> <label for="inputRepeatPassword">Password repeat:</label> <input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button> </div> </form>

Answer 2

You have code to display if the passwords are the same or not. However, there is not any code to control how to handle submit with invalid passwords.

Here are two options:

1) <form onSubmit> as described in Pankaj's answer.

2) You could also have your validate function disable your submit button.

(Add an id to your submit <button type="submit" id=submitBtn class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>

function validatePassword(){
    var submit = document.getElementById('submitBtn');
    if (pass2.value == pass1.value) {
        pass2.setCustomValidity('');
        submit.disabled = false;
    } else {
        pass2.setCustomValidity('Both passwords do not match');
        submit.disabled = true;
    }
}

Answer 3

必须放在底部之前才能工作。