Introduction:
In this article I will explain how
to validate form data using JavaScript validation in asp.net. I have tried
to cover all the
type of fields to validate.
Description: It is
very important to valid data before submit it to database. ASP.NET provides a set of validation controls that provide an easy-to-use and powerful way
to check for errors. Similarly we can also create
functions
in JavaScript to validate the form data before submitting it to server thus saving the server time and overhead of validate data at server.
in JavaScript to validate the form data before submitting it to server thus saving the server time and overhead of validate data at server.
Implementation: In the design page(.aspx) create the structure having TextBoxes to enter username, password ,confirm password, first name, last name, email address, phone numberand locations.And also place a submit button as:
<table>
<tr>
<td>
Username</td>
<td>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Password</td>
<td>
<asp:TextBox ID="txtpwd" runat="server"></asp:TextBox>
</td>
<tr>
<td >
confirm password</td>
<td>
<asp:TextBox ID="txtcnmpwd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
First name</td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
last name</td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Emial Address</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Phone number</td>
<td>
<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Location</td>
<td>
<asp:TextBox ID="txtlocation" runat="server" Height="22px"></asp:TextBox>
</td>
</tr>
<tr>
<td >
</td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" />
</td>
</tr>
<tr>
<td >
</td>
<td>
</td>
</tr>
</table>
- Now in the Head tag of the design page(.aspx) write the
JavaScript function as:
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function validationCheck()
{
var summary = "";
summary += isvaliduser();
summary += isvalidpassword();
summary += isvalidConfirmpassword();
summary += isvalidFirstname();
summary += isvalidLastname();
summary += isvalidEmail();
summary += isvalidphoneno();
summary += isvalidLocation();
if (summary != "")
{
alert(summary);
return false;
}
else {
return true;
}
}
function isvaliduser()
{
var id;
var temp = document.getElementById("<%=txtuser.ClientID %>");
id = temp.value;
if (id == "")
{
return ("Please Enter User
Name" + "\n");
}
else
{
return "";
}
}
function isvalidpassword()
{
var id;
var temp = document.getElementById("<%=txtpwd.ClientID %>");
id = temp.value;
if (id == "")
{
return ("Please enter
password" + "\n");
}
else
{
return "";
}
}
function isvalidConfirmpassword() {
var uidpwd;
var uidcnmpwd;
var tempcnmpwd = document.getElementById("<%=txtcnmpwd.ClientID %>");
uidcnmpwd = tempcnmpwd.value;
var temppwd = document.getElementById("<%=txtpwd.ClientID %>");
uidpwd = temppwd.value;
if (uidcnmpwd == "" || uidcnmpwd != uidpwd)
{
return ("Please re-enter password
to confrim" + "\n");
}
else {
return "";
}
}
function isvalidFirstname()
{
var id;
var temp = document.getElementById("<%=txtfname.ClientID %>");
id = temp.value;
if (id == "")
{
return ("Please enter first
name" + "\n");
}
else
{
return "";
}
}
function isvalidLastname()
{
var id;
var temp = document.getElementById("<%=txtlname.ClientID %>");
id = temp.value;
if (id == "")
{
return ("Please enter last
name" + "\n");
}
else
{
return "";
}
}
function isvalidEmail()
{
var id;
var temp =
document.getElementById("<%=txtEmail.ClientID %>");
id = temp.value;
var re =
/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (id == "")
{
return ("Please Enter Email" + "\n");
}
else if (re.test(id))
{
return "";
}
else
{
return ("Email should be in the form ex:abc@xyz.com" + "\n");
}
}
function isvalidphoneno()
{
var id;
var temp = document.getElementById("<%=txtphone.ClientID %>");
id = temp.value;
var re;
re = /^[0-9]+$/;
var digits = /\d(10)/;
if (id == "") {
return ("Please enter phone
no" + "\n");
}
else if (re.test(id))
{
return "";
}
else
{
return ("Phone no should be digits
only" + "\n");
}
}
function isvalidLocation()
{
var id;
var temp = document.getElementById("<%=txtlocation.ClientID %>");
id = temp.value;
if (id == "")
{
return ("Please enter
Location" + "\n");
}
else
{
return "";
}
}
</script>
</head>
C#.NET Code to implement form validations using javascript in asp.net
- Now in the code behind file(.aspx.cs) write codeon page load
event
protected void Page_Load(object sender, EventArgs e)
{
btnsubmit.Attributes.Add("onclick", "javascript:return
validationCheck()");
}
VB.NET Code to
implement form validations using javascript in asp.net
- Now in the code behind file(.aspx.vb) write codeon page load
event
Protected
Sub Page_Load(sender As Object, e As EventArgs)
btnsubmit.Attributes.Add("onclick", "javascript:return
validationCheck()")
End Sub
0 comments:
Post a Comment