Introduction
: In previous articles i explained the Example to implement Jquery form validations in asp.net and Message box in asp.net website using JavaScript and how to redirect visitor from one website to another website using java script and How to call java script function from code behind file in asp.net and How to show Validation guidelines in web forms using JavaScript in Asp.net ?
In this article i am going to explain how to validate form data using JavaScript in asp.net. I have tried to cover all the basic fields that are on the form and validated that all.
Description: An important point while creating ASP.NET Websites is to be able to check that the information users enter is valid. ASP.NET provides a set of validation controls that provide an easy-to-use but powerful way to check for errors and, if necessary, display messages to the user. Similarly we can also create functions in JavaScript to validate the form data before submitted to server thus saving the server time and overhead.
Implementation: In the design page(.aspx) create the structure having TextBoxes to enter username, password ,confirm password, first name, last name, email address, phone number and locations.And also place a submit button as:
C#.NET Code to implement form validations using javascript in asp.net
In this article i am going to explain how to validate form data using JavaScript in asp.net. I have tried to cover all the basic fields that are on the form and validated that all.
Description: An important point while creating ASP.NET Websites is to be able to check that the information users enter is valid. ASP.NET provides a set of validation controls that provide an easy-to-use but powerful way to check for errors and, if necessary, display messages to the user. Similarly we can also create functions in JavaScript to validate the form data before submitted to server thus saving the server time and overhead.
Implementation: In the design page(.aspx) create the structure having TextBoxes to enter username, password ,confirm password, first name, last name, email address, phone number and 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>
<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
Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."
9 comments
Click here for commentsYou are Such a gr8 Programmer and your programming skills very huge penetration..........so pls give me your email ID becoz anyone query i ask 2 u and also give your facebook Email ID.
ReplyHello vipul..thanks for your appreciation..You can send me your query through contact us form http://www.webcodeexpert.com/p/contact-us.html. Stay tuned for more updates like this.
ReplyHello Lalit,
ReplyI have applied AJAX in gridview.. (UPDATE PANEL).. and i had a fileupload in one column and it was working fine with jquery for multiple file uploads. but after applying AJAX it is not working.
Any clue?
Thanks
Read the article to solve your problem of fileupload control in update panel.
ReplySolution to FileUpload control is not working in UpdatePanel.
http://www.webcodeexpert.com/2013/08/fileupload-control-in-update-panel.html
hallo lalit sir u really such a darling u r a great programmer.and ur programme is very helful to a novice like me.great man...keepit up.....
ReplyThanks for your appreciation..keep reading..
ReplyGood article.......bt how can we validate password strength using javascript???
ReplyHi chanchal..you can use ajax password strength control for that purpose .Check the link http://www.webcodeexpert.com/2013/07/how-to-use-ajax-passwordstrength.html
ReplyKindly give an example of validation on asp Master pages. I have to validate my content page by jquery
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..