Client Side Validation Using JQuery In Asp.Net
Here we are using validation in JQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery Validation</title>
<script src="Script/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function validation() {
// Required field validation for Name
if ($('#<%=txtName.ClientID%>'
).val()
==
"") {
alert("Please enter Name");
return false;
}
// Required field validation for Mobile
if ($('#<%=txtMobile.ClientID%>'
).val()
==
"") {
alert("Please enter Mobile");
return false;
}
// Regular expression validation for Mobile
if ($('#<%=txtMobile.ClientID%>'
).val()
!=
"") {
if (isNaN($('#<%=txtMobile.ClientID%>'
).val()))
{
alert("Please enter only numeric values");
return false;
}
}
// Required field validation for Email
if ($('#<%=txtEmail.ClientID%>'
).val()
==
"") {
alert("Please enter EmailID");
return false;
}
// Regular expression validation for Email
if ($('#<%=txtEmail.ClientID%>'
).val()
!=
"") {
var pattern = /^([a-zA-Z0-9_\.\-])+\@(([a - zA - Z0 - 9\-]) +\.)+([a-zA-Z0-9]{2,4})+$/;
if (!pattern.test($('#<%=txtEmail.ClientID%>'
).val()))
{
alert("Please enter valid EmailID");
return false;
}
}
// Required field validation for Address
if ($('#<%=txtAddress.ClientID%>'
).val()
==
"") {
alert("Please enter Address");
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center" >
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Mobile</td>
<td>
<asp:TextBox ID="txtMobile" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Address</td>
<td>
<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick
="return
validation();"
OnClick="btnSave_Click" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
View output :
