Article will cover basic type of jquery validation in ASP.Net, it validate the input\textbox values records in client side itself.
First you need to add the javascript file\javascript section where you need to put the jquery code. I am putting the Javascript section on the ASPX file itself. Like below;
Before starting the code need to take the reference of JQuery file into your system.
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
Bind the Button click event while loading the page at first time.
<script type="text/javascript">
$(document).ready(function () {
$('#btnClick').click(function () {
//Your code should be there
});
});
Get Text object into one of the variable in Javascript; It used to read Textbox value in Javascript;
var txtName = $('#txtName').val();
var txtPhoneNumber = $('#txtPhoneNumber').val();
var txtEmailId = $('#txtEmailId').val();
Defined Textbox mode in HTML as Static like:
<asp:TextBox ID="txtName" ClientIDMode="Static" runat="server"></asp:TextBox>
Let’s go one by one how we need to validate the records through JQuery in ASP.Net;
1. Validation the mandatory text box, We enforce user to insert the value in text box;
if (txtName == '') {
alert("Please Enter Name");
return false;
}
if (txtPhoneNumber == '') {
alert("Please Enter phone Number");
return false;
}
if (txtEmailId == '') {
alert("Please Enter Email Address");
return false;
}
2. Validating the text length in JQuery should not more than creation length;
Like validate the phone number is 10 characters only;
if (txtName.length > 15) {
alert("Name is not more than 10 Charater");
return false;
}
if (txtPhoneNumber.length > 10) {
alert("Phone Number is not more than 10 Charater");
return false;
}
3. Doing number validation in JQuery; need to check that there is only number no any character.
IsNaN – is not a number than it returns true value;
if (isNaN(txtPhoneNumber)) {
alert("Phone number should number only");
return false;
}
4. Doing regex validation in JQuery for email address; It allow only the character allow in email address;
There need to write the email pattern; you need to put any of the patterns which you need to;
var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/
var EmailmatchArray = txtEmailId.match(emailPat);
if (EmailmatchArray == null) {
alert("Your email address is incorrect.");
return false;
}
@Full Javascript code and HTML Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Validation by Javascript</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnClick').click(function () {
var txtName = $('#txtName').val();
var txtPhoneNumber = $('#txtPhoneNumber').val();
var txtEmailId = $('#txtEmailId').val();
if (txtName == '') {
alert("Please Enter Name");
return false;
}
if (txtPhoneNumber == '') {
alert("Please Enter phone Number");
return false;
}
if (txtEmailId == '') {
alert("Please Enter Email Address");
return false;
}
if (txtName.length > 15) {
alert("Name is not more than 15 Charater");
return false;
}
if (txtPhoneNumber.length > 10) {
alert("Phone Number is not more than 10 Charater");
return false;
}
if (isNaN(txtPhoneNumber)) {
alert("Phone number should number only");
return false;
}
var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/
var EmailmatchArray = txtEmailId.match(emailPat);
if (EmailmatchArray == null) {
alert("Your email address is incorrect.");
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="60%" align="center">
<tr>
<td colspan="2" align="center">
<h1>
Validation by Javascript</h1>
</td>
</tr>
<tr>
<td align="right">
Name :
</td>
<td align="left">
<asp:TextBox ID="txtName" ClientIDMode="Static" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Phone Number :
</td>
<td align="left">
<asp:TextBox ID="txtPhoneNumber" ClientIDMode="Static" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Email Address :
</td>
<td align="left">
<asp:TextBox ID="txtEmailId" ClientIDMode="Static" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
</td>
<td align="left">
<asp:Button runat="server" ID="btnClick"
Text="Save" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
@Screen will look alike
Having wrong email address; It gives the alert message;
No comments:
Post a Comment