In this article, I will try to implement passwords and confirm password validation on asp.net server-side control using jQuery. The below image shows four variants that will occur when the user does not enter the value. The first variant could be the result.
If the user does enter the value in the first textbox and not in the second textbox, then the second variant could be the result.
If the user enters different values in both textboxes, a third variant could be the result.
If the user enters the same value in both textboxes, the fourth variant could be the result.
Before we go through the in-depth content of this article, I strongly recommend reading my previous article, which is related to jQuery validation.
- Password Validation using jQuery
- Dropdownlist Validation using jQuery
- jQuery Validation on Asp.Net Master Page Control
HTML Markup
On the Asp.net page, we design according to our requirements, as shown in the above image.
- First, we need to add the asp.net control label, which is used to display error messages. The ID of this control is lblerror.
- Second, we have to add two textboxes that are used to enter passwords in them, and the IDs of these textboxes are the first textbox id, which is txt_pwd, and the second textbox id, which is txt_conf_pwd.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Email Address Validation.aspx.cs" Inherits="JQUERY_TUTORIALS_Email_Address_Validation" %>
<!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 runat="server">
<title></title>
----- ADD JQUERY CODE HERE -----
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="lblerror" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>
<asp:TextBox ID="txt_pwd" runat="server" TextMode="Password" placeholder="password..."></asp:TextBox><asp:Label ID="lblerror_pwd" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td><asp:TextBox ID="txt_conf_pwd" runat="server" TextMode="Password" placeholder="Confirm password..."></asp:TextBox><asp:Label ID="lblerror_conf_pwd" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</div>
</form>
</body>
</html>
JQuery Code for Password and Confirm Password
Now, let's add the JQuery code to implement the validation:
<script type="text/javascript">
$(document).ready(function () {
$('[id$=txt_pwd]').focusout(function () {
if ($('[id$=txt_pwd]').val() == "") {
$('[id$=lblerror_pwd]').html("Please Enter Password");
}
else
$('[id$=lblerror_pwd]').html(" ");
});
$('[id$=txt_conf_pwd]').focusout(function () {
if ($('[id$=txt_conf_pwd]').val() == "") {
$('[id$=lblerror_conf_pwd]').html("Please Enter Confirm Password");
} else
$('[id$=lblerror_conf_pwd]').html(" ");
if ($('[id$=txt_conf_pwd]').val() != "") {
var pwd = $('[id$=txt_pwd]').val();
var conf_pwd = $('[id$=txt_conf_pwd]').val();
if (conf_pwd == pwd) {
$('[id$=lblerror]').html("Password Matching...");
}
else {
$('[id$=lblerror]').html("Password Not Matching...");
return false;
}
}
});
});
</script>
jQuery Validation Explanation
In this tutorial, we are using jQuery focusout event to validate for both textboxes i.e txt_pwd and txt_conf_pwd.
First, we validate whether the txt_pwd textbox contains any value or not; if the textbox does not contain any value, then it will show an error message in the label, i.e., lblerror, and the error message will be "Please Enter Password." Or else if the textbox contains some value, it will give an empty message or remove error messages.
$('[id$=txt_pwd]').focusout(function () {
if ($('[id$=txt_pwd]').val() == "") {
$('[id$=lblerror_pwd]').html("Please Enter Password");
}
else
$('[id$=lblerror_pwd]').html(" ");
});
Second, we check whether the txt_conf_pwd textbox has value or not; if not, then it will give the same error message, "Please Enter Password." If txt_conf_pwd contains some value, then it will check if the txt_pwd and txt_conf_pwd textboxes both have the same value or not. If both values are different, then it will give an error message, i.e., Password Not Matching; if they have the same value, then it will give a success message, i.e., Password Matching.
$('[id$=txt_conf_pwd]').focusout(function () {
if ($('[id$=txt_conf_pwd]').val() == "") {
$('[id$=lblerror_conf_pwd]').html("Please Enter Confirm Password");
} else
$('[id$=lblerror_conf_pwd]').html(" ");
if ($('[id$=txt_conf_pwd]').val() != "") {
var pwd = $('[id$=txt_pwd]').val();
var conf_pwd = $('[id$=txt_conf_pwd]').val();
if (conf_pwd == pwd) {
$('[id$=lblerror]').html("Password Matching...");
}
else {
$('[id$=lblerror]').html("Password Not Matching...");
return false;
}
}
});
0 Comments