In web forms, it is common to have a “Confirm Password” field where users are required to re-enter their password to ensure accuracy and prevent any typing errors. JavaScript can be used to validate the confirm password field and provide real-time feedback to the user.
Here is an example of how to implement confirm password validation in JavaScript:
<html>
<head>
<title>Confirm Password Validation</title>
<script>
function validatePassword() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
if (password != confirmPassword) {
document.getElementById("message").innerHTML = "Passwords do not match";
return false;
} else {
document.getElementById("message").innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<form onsubmit="return validatePassword()">
<label for="password">Password:</label>
<input type="password" id="password" required>
<br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" required>
<br>
<span id="message" style="color: red;"></span>
<br>
<input type="submit" value="Register">
</form>
</body>
</html>
In the above example, we have a simple registration form with two password fields: “Password” and “Confirm Password”. The JavaScript function validatePassword() is called when the form is submitted.
Inside the validatePassword() function, we retrieve the values entered in both password fields using the getElementById() method. We then compare the two values using the inequality operator (!=) to check if they match.
If the passwords do not match, we display an error message to the user by setting the innerHTML property of the <span> element with the id “message”. The error message is styled with red color using inline CSS.
If the passwords match, we clear the error message by setting the innerHTML property to an empty string.
The return false; statement is used to prevent the form from being submitted if the passwords do not match. This ensures that the user is prompted to correct the error before proceeding.
By adding the onsubmit="return validatePassword()" attribute to the form element, the validatePassword() function is called when the form is submitted. If the function returns false, the form submission is prevented.
With this implementation, users will receive real-time feedback on whether their passwords match or not. This helps improve the user experience and reduces the chance of errors during the registration process.
It is important to note that JavaScript validation should always be accompanied by server-side validation to ensure the security and integrity of user data.
By implementing confirm password validation in JavaScript, you can enhance the reliability and user-friendliness of your web forms, providing a seamless experience for your users.