Password and Confirm Password validation using jQuery
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to implement Password and Confirm Password validation for Password TextBox using jQuery. The entered values of the Password and Confirm Password TextBoxes are compared using jQuery and on the button click if the entered values values do not match an error message will be displayed on the screen.
Code for HTML Page
On the HTML page I will place two TextBoxes with the id named txt_Pwd and Confirm_pwd and I will also place a Button control with the id named btn_submit.
I will assigned jQuery Click event on document ready event handler of the button .
When user will click on the Submit button after entering the text inside the both textboxes, the values of the Password and the Confirm Password TextBoxes are fetched and are matched with the each other. If the values of the Password and the Confirm Password TextBoxes do not match, an error message will be displayed on the screen using JavaScript Alert Message Box and False value is returned in order to stop the form submission.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Password</td>
<td>
<input name=" txt_Pwd " type="password" id=" txt_Pwd " />
</td>
</tr>
<tr>
<td>Confirm Password</td>
<td>
<input name="Confirm_Pwd" type="password" id="Confirm_Pwd" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id=" btn_submit " value="Submit" />
</td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btn_submit]").click(function () {
var password = $("[id*=txt_pwd]").val();
var confirmPassword = $("[id*=txt_confirm]").val();
if (password != confirmPassword) {
alert("Passwords do not match.");
return false;
}
return true;
});
});
</script>
Now Here i am giving complete code for the HTML page. You can copy and paste the whole code on your HTMl page. And enjoy the execution of the whole concept.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
table { border: 1px solid #ccc; border-collapse: collapse; }
table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
table th, table td { padding: 5px; border: 1px solid #ccc; }
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Password</td>
<td><input name="txt_Pwd" type="text" id="txt_Pwd" TextMode="Password" /></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input name="Confirm_Pwd" type="text" id="Confirm_Pwd" TextMode="Password" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btn_submit" value="Submit" onclick="Validation_pwd()"/></td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function Validation_pwd() {
$("[id*=btn_submit]").click(function () {
var password = $("[id*=txt_Pwd]").val();
var confirmPassword = $("[id*=Confirm_Pwd]").val();
if (password != confirmPassword) {
alert("Passwords do not match.");
return false;
}
return true;
});
});
</script>
</body>
</html>
Check the Output of the complete Program
Conclusion: In above code, I explained that how to implement Password and Confirm Password validation for Password TextBox using jQuery. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment