This
article will show you how you can perform password compare validation using
html5 validation in asp.ne t using jquery.
So for this article first we will create a new aspo.net application and add two controls and a button control in asp.net page. After adding all the control your page will look as shown below.
<form id="form1" runat="server">
<div>
Password:
<asp:TextBox ID="txtPassword"
runat="server" required></asp:TextBox>
<br /> <br />
Confirm
Password:
<asp:TextBox ID="txtConfirmPassword" runat="server" required></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" />
</div>
</form>
|
In above
code please check the required attribute. This is the HTML5 validation
attribute. This will not allow to submit the form before entering the value in
the textbox. Now lets write the code for password compare in html 5. Please
check the below javascript code.
<script>
function
ComparePasswordValues() {
var password =
document.getElementById("<%=txtPassword.ClientID %>").value;
var confirmPassword =
document.getElementById("<%=txtConfirmPassword.ClientID %>").value;
if (password !=
confirmPassword) {
document.getElementById("<%=txtConfirmPassword.ClientID %>").setCustomValidity("Passwords
are not same.");
}
else {
document.getElementById("<%=txtConfirmPassword.ClientID %>").setCustomValidity('');
}
//empty string means no validation error
}
window.onload = function () {
document.getElementById("<%=txtPassword.ClientID %>").onchange =
ComparePasswordValues;
document.getElementById("<%=txtConfirmPassword.ClientID %>").onchange = ComparePasswordValue;
} </script>
|
In above code by using javascript code I have attached the html5 validation. After that on windows load code for validating the value of the above function have been called. Now check the complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PasswordCompare.aspx.cs" Inherits="Shoping_Cart.PasswordCompare" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Password Compare
Validation in HTML5 Using JavaScript</title>
<script>
function
ComparePasswordValues() {
var password =
document.getElementById("<%=txtPassword.ClientID %>").value;
var confirmPassword =
document.getElementById("<%=txtConfirmPassword.ClientID %>").value;
if (password !=
confirmPassword) {
document.getElementById("<%=txtConfirmPassword.ClientID %>").setCustomValidity("Passwords
are not same.");
}
else {
document.getElementById("<%=txtConfirmPassword.ClientID %>").setCustomValidity('');
}
//empty string means no validation error
}
window.onload = function () {
document.getElementById("<%=txtPassword.ClientID %>").onchange =
ComparePasswordValues;
document.getElementById("<%=txtConfirmPassword.ClientID %>").onchange = ComparePasswordValue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Password:
<asp:TextBox ID="txtPassword"
runat="server" required></asp:TextBox>
<br /> <br />
Confirm
Password:
<asp:TextBox ID="txtConfirmPassword" runat="server" required></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view