Article will cover basic type of javascript validation, 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 javascript code. I am putting the Javascript section on the ASPX file itself. Like below;
<head runat="server">
<title>Validation by Javascript</title>
<script type="text/javascript" >
function validateData() {
//all code come under this function
}
</script>
Get Text object into one of the variable in Javascript; It used to read Textbox value in Javascript;
For VS2005 or VS2008
var txtName = document.getElementById('<%=txtName.ClientID %>').value;
var txtPhoneNumber = document.getElementById('<%=txtPhoneNumber.ClientID %>').value;
var txtEmailId = document.getElementById('<%=txtEmailId.ClientID %>').value;
For 2010 or 2012
var txtName = document.getElementById('txtName').value;
var txtPhoneNumber = document.getElementById('txtPhoneNumber').value;
var txtEmailId = document.getElementById('txtEmailId').value;
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 Javascript in ASP.Net;
1. Validation the mandatory text box, We enforce user to insert the value in text box;
if (txtName == "") {
alert("Enter Name");
return false;
}
if (txtPhoneNumber == "") {
alert("Enter Phone Number");
return false;
}
if (txtEmailId == "") {
alert("Enter Email");
return false;
}
2. Validating the text length in javascript 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 javascript; 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 javascript 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
<head runat="server">
<title>Validation by Javascript</title>
<script type="text/javascript">
function validateData() {
var txtName = document.getElementById('txtName').value;
var txtPhoneNumber = document.getElementById('txtPhoneNumber').value;
var txtEmailId = document.getElementById('txtEmailId').value;
if (txtName == "") {
alert("Enter Name");
return false;
}
if (txtPhoneNumber == "") {
alert("Enter Phone Number");
return false;
}
if (txtEmailId == "") {
alert("Enter Email");
return false;
}
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;
}
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" OnClientClick="javascript:validateData();"
Text="Save" />
</td>
</tr>
</table>
</div>
</form>
</body>
@Screen will look alike
Having wrong email address; It gives the alert message;
No comments:
Post a Comment