Introduction
Here
I will explain how to validate user registration form using jQuery
on submit or jQuery validate form before submit on button click.
Description:
In
previous article I explained jQuery Show hide and toggle div example, jQuery calculate pageload time, jQuery scrollable div with fixed header, change page title in jquery dynamically, Disable drag and drop options in
textbox or textarea controls, JavaScript show number of characters
left in textbox and many articles relating to asp.net, jQuery, JavaScript. Now I will explain
how to validate registration form in jQuery
before submit on button click.
To implement this we need to write the
code like as shown below
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>jQuery Registration Form Validation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
$('#btnvalidate').click(function() {
var summary = "";
summary += isvaliduser();
summary += isvalidFirstname();
summary += isvalidLocation();
if (summary != "")
{
alert(summary);
return false;
}
else {
return true;
}
})
})
function isvaliduser() {
var temp = $("#txtuser").val();
if (temp == "")
{
return ("Please
Enter UserName" + "\n");
}
else {
return "";
}
}
function isvalidFirstname() {
var temp = $("#txtfname").val();
if (temp == "")
{
return ("Please
Enter firstname" + "\n");
}
else {
return "";
}
}
function isvalidLocation() {
var temp = $("#txtlocation").val();
if (temp == "")
{
return ("Please
Enter Location" + "\n");
}
else {
return "";
}
}
</script>
</head>
<body>
<form id="form1">
<table align="center">
<tr>
<td>UserName</td>
<td>
<input type="text" id="txtuser" />
</td>
</tr>
<tr>
<td>First Name</td>
<td>
<input type="text" id="txtfname" />
</td>
</tr>
<tr>
<td>Location</td>
<td>
<input type="text" id="txtlocation" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Validate" id="btnvalidate" />
</td>
</tr>
</table>
</form>
</body>
</html>
|
Live
Demo
To check for live demo try to click on below button
|
Note: if
you want to use for asp.net controls replace $("#txtlocation").val();
you’re your asp.net control id like this $("#<%=txtlocation.ClientID
%>").val()
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
6 comments :
sir, i have been following your blogs, since a long time. Am an ASP.NET, C#, SQL programmer. Please, i've checked and this is the only way i could contact you. I will like to talk to you. Please you can Email me on Wizston@hotmail.com.
Thanks in advance sir.
ankita kuraneeeee
Hi sir,
same implementation i want to do in mvc 2 application can u please help me.
good post.
Nice . Thank You . .
good job
Note: Only a member of this blog may post a comment.