Confirm Password Validation
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of confirm password validation, in many websites for example in their sign up page they ask us to enter our username, email id and password, etc. with confirm password field.
It means that we have to enter password two times, there is also some validations like password must contain some specific characters, etc.
So, here today we will understand how to apply validation on confirm password in JavaScript.
Step By Step Guide On Confirm Password Validation :-
Here, below we are going to show that how we can apply validation on confirm password in JavaScript.
For this we must have to create a password field in which we type our password first type, this password may be with validation or may be without validation.
Now, let us see how to done this with help of codes.
<!DOCTYPE html>
<head>
<title>
JavaScript Validation
</title>
</head>
<body>
<h1>
TalkersCode – JavaScript Validations
</h1>
<h2>
Confirm password validation in JavaScript
</h2>
<label>
Enter Your Password here:
</label>
<input id="password" type="password" name="password" placeholder="Enter Password here" required>
<label>
Enter Confirm Password here:
</label>
<input id="cpassword" type="password" name="cpassword" placeholder="Enter Confirm Password here" required onkeyup="checkPassword()">
<span id="pass_msg"></span>
<button id="button" onclick="pass_msg()">
Check Password
</button>
<script>
function checkPassword() {
var password = document.getElementById('password').value;
var cpassword = document.getElementById('cpassword ').value;
if (password!= cpassword) {
document.getElementById('pass_msg').style.color = 'red';
document.getElementById('pass_msg').innerHTML
= 'Password does not matched';
document.getElementById(' button ').disabled = true;
document.getElementById('button').style.opacity = (0.4);
} else {
document.getElementById('pass_msg').style.color = 'green';
document.getElementById('pass_msg').innerHTML =
' Password is matched now';
document.getElementById('create').disabled = false;
document.getElementById('button').style.opacity = (1);
}
}
function pass_msg() {
if (document.getElementById('password').value != "" &&
document.getElementById('cpassword ').value != "") {
alert("Successfully, everything is done, you can go ahead");
} else {
alert("Please fill all the required fields");
}
}
</script>
</body>
</html>
- Here, above we show you an example in JavaScript.
- For this first of all we here create a basic structure of html. For this we use html, head, title and body with script tag. We hope you know about the basic structure of html and which html tag is used for which concept.
- Now, when we look inside body tag. Here, we see some headings tag and a script tag. Heading tag again is a concept of html, whereas script relates to JavaScript.
- JavaScript is written always inside script tag. Where script is a paired tag so it also has a closing tag. Now inside these script tag, we write our JavaScript code.
- Here, as we see in form we create two fields for password and confirm password with one button to submit form. At next on key up on confirm password and button click our different functions get called.
- At first, our both the fields are required and they must be matched. If they are not matched then error messages will be showed as per requirement. Rest you can see the above code for better understanding.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to use confirm password validation in JavaScript.
I hope this tutorial on confirm password validation helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
