Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery form validations example in asp.net

Jan 12, 2012
Introduction:

In this article I will explain how to show small popup or beautiful style of validation messages or inline form validation messages when validation fails in asp.net using JQuery.


Description:
  
In previous articles I explained about
Display validation error messages with images and Change textbox background when validation fails and Ajax Password Strength using asp.net  and many articles on JQUery. Now I will explain how to implement inline form validations when validation fails using JQuery in asp.net.

In one of the website I saw different type of form validations in registration form when we click on submit button without entering any data they are showing some small balloon type validation messages we can implement this functionality easily by using available JQuery plugins.
First open Visual Studio and create new website after that right click on your website and add new folder and give name as JS and insert script files in folder you should get it from attached folder same way add another new folder and give name as CSS and insert required css files in folder you should get it from attached folder. After that write the following code in your aspx page 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show Inline validation Messages</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#form1").validationEngine();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table align="center">
<tr>
<td colspan="2">
<div style="border: 1px solid #CCCCCC; padding: 10px;">
<table cellpadding="0" cellspacing="30" style=" background-color:White">
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtfname"  runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtlname"  runat="server" CssClass="validate[required]"/></td>
</tr>
<tr >
<td>Email:</td>
<td><asp:TextBox ID="txtemail" runat="server"  CssClass="validate[required,custom[email]" />
</td>
</tr>
<tr >
<td>Url:</td>
<td><asp:TextBox ID="txtUrl" runat="server" CssClass="validate[required,custom[url]] text-input" />
</td>
</tr>
<tr>
<td valign="top">Address:</td>
<td>
<asp:TextBox ID="txtaddress" runat="server" TextMode="MultiLine" Rows="8" Columns="26"/></td>
</tr>
<tr>
<td>State:</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" CssClass="validate[required] radio">
<asp:ListItem value="">Choose State</asp:ListItem>
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem  value="AL">Alabama </asp:ListItem>
<asp:ListItem  value="AK">Alaska</asp:ListItem>
<asp:ListItem  value="AZ">Arizona</asp:ListItem>
<asp:ListItem  value="AR">Arkansas</asp:ListItem>
<asp:ListItem  value="CA">California</asp:ListItem>
<asp:ListItem  value="CO">Colorado</asp:ListItem>
<asp:ListItem  value="CT">Connecticut</asp:ListItem>
<asp:ListItem  value="DE">Delaware</asp:ListItem>
<asp:ListItem  value="FL">Florida</asp:ListItem>
<asp:ListItem  value="GA">Georgia</asp:ListItem>
<asp:ListItem  value="HI">Hawaii</asp:ListItem>
<asp:ListItem  value="ID">Idaho</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Zip:</td>
<td>
<asp:TextBox ID="txtZip" runat="server" CssClass="validate[required,custom[integer]] text-input"/>
</td>
</tr>
<tr>
<td> I Agree Conditions</td>
<td>
<input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblResult" runat="server" Font-Bold="true"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
If you observe above code in header section I added some of script files and css files by using those files we have a chance to show popup messages when validation fails using JQuery in asp.net. Here one thing we need to remember that is if we want add validation for particular control then we need to add css class CssClass="validate[required]" to that particular control.

Now add the following namespaces in code behind

using System;
using System.Drawing;
After that add following codes in code behind

protected void btnSubmit_Click(object sender, EventArgs e)
{
lblResult.Visible = true;
lblResult.Text = "Successfully Validated all the controls";
lblResult.ForeColor = Color.Green;
}
After run your application and check the output.

Demo

Download sample code attached







Here we can customize the script files based on our requirement and if we have more fields automatically scroll the page to first error. If you observe above demo in that ZiP Code field allows only numbers, Url field allows only valid url format and Email field allows only certain email format in the same way we have different options like date, maximum numbers allowed etc based on our settings in script file .

To know more about this JQuery plugin check these sites position-absolute.com and JQuery tooltip demo page position-relative.net

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 RSS subscribe by email Subscribe by Email

104 comments :

Ajay said...

Thanks....
Present am looking for this..

Bitarray Solutions said...
This comment has been removed by the author.
Rajesh Sharma said...

Nice

sherinbabu said...

Hi,
I was wondering if u could tell me how to use this within a content page.. When I use the form tag inside a content page it throws the following exception "System.Web.HttpException: A page can have only one server-side Form tag".
Is there any way to work around this?
Thankyou. .

Anonymous said...

I used it this is a great tools but i find it hard to fix certain thing, Like it validation triggers for MasterPage design for any button on the master page on content page.
How can we get around that.

Second i had integrated same validation with 3 Ajax Modal popups in one page as requirement was such in such scenario sometimes button doesnt fire and other similar issue. Anyway Just was to thank you who have put some real good article which are worth using

vikvish said...

Hello sir, how can i attach my CSS with textbox and dropdown ? as u i have seen u used input type and radio kind of the tags for it..

*actually i need diff. css for textbox and dropdown.

will wait for ur reply...

Zaheer said...

Hi,

I want to ask you one simple question. I have checked it. It only works with button whose type=submit. How we can use it with type=button. I have checked it but it doesn't work.

Suresh Dasari said...

@Zaheer..
If you observe above post in that i used asp control with type=button not type=submit please check it once it's working fine.

Using ASP.NET said...

How we can set causevalidation="false" property of this button.. Using these validations

M.K.Balachandran said...

In my form 2 buttons are there one is submit and another one is cancel. when user press cancel button that time also validation has come so how to solve this?

Jeremy said...

Thanks for this! It does work as advertised; however, it does not seem to pass a validation check even though the form seems to work.

Also, In my scenario my form resides on a masterpage and that seems to break it. I have looked around and so far this is the best post I have seen in a hundred, but it doesn't cover this. Any help would be GREATLY apprecieated! Thanks!

Jeremy said...

This works great, best example I have seen and I REALLY looked! However, as soon as I try to use this in scenario where my form resides on a masterpage, and your provided table resides on the childpage it breaks it. The table renders fine, but the validation fails; actually running alert($("#form1").validationEngine('validate')); returns false even without altering your code. Any help you could give me would be MUCH appreciated! Thanks again!

Venugopal said...

how to validate dropdownlist if i will bind dropdownlist dynamically

Anonymous said...

How to validate on Button click, if I click on button I would like to show alert as Failed if validation fails and Success if Validation Success.. How can I do this

Suresh Dasari said...

To show javascript validation message when click on button check this post http://www.aspdotnet-suresh.com/2010/10/javascript-validations-to-validate-form.html

shrinivas said...

I am not finding any attachments for css and JQuery... could you please provide me CSS and JQuery...

Suresh Dasari said...

@Sriniva.....
Everything is there in folder check it once......

Anonymous said...

hai suresh.i have one doubt
when i click the submit button validation required is coming but it will execute on server and form get post backed

abinash said...

abinash::--
hai suresh.i have one doubt

when i click the submit button validation required is coming but when i click the cancel button again validation is required

abinash said...

abinash::--
hai suresh.i have one doubt

when i click the submit button validation required is coming but when i click the cancel button again validation is required

Raja said...

in master page this jquery will not work any possible to work with master page

bhupesh kumar said...

very nice client side validation by Jquery with ASP.NET.
by Bhupesh Kumar xpert infotech

Anonymous said...

How to Use It In Content Page without Form Tag

Rendla Narayan Das said...

Hi Suresh,

This article looks good. where i can find the attached folder?
...Das

Suresh Dasari said...

@Das...
In post i added DownLoad Sample Code Attached please check it and download it

Rendla Narayan Das said...

Thank you Suresh,
Nice post.... Keep Posting.
...Das

Mukund.Potdar said...

How can I auto refresh web page if user skip or enter invalid data into textbox and after this validation must be visible to user

coolduderaj said...

Its is not working with master page. how do I use it with masterpage

coolduderaj said...

What is the of equals in JQuery From Validation??
"equals": {
"regex": "none",
"alertText": "* Fields do not match"
},

How can I use it?? It is for compare between two textBox????

coolduderaj said...

Hi Suresh,

How can I set rules when I use from validation...like datetime range, compare password etc...

Please reply............

C4computer said...

Where are you assigning the error message like "*Invalid URL"

SAMSARI said...

this example not working in master page scenario ..

koti said...

hi sir ,

please provide the code for validating
radio button list & check box list & list view

koti said...

hi sir ,

How to validate
radio button list & check box list & list view..

very urgent please,.............

Sushant said...

Hi suresh,

How can i show the validation message one by one in button click.

Thanks in advance.

RAJ said...

sir i used your code..it worked for me thanks..but sir there is a prblm m having to button on my form btnSubmit and btnreset..on clicking submit its proper but when i m clicking on reset tnen also validation occurs i want the validation to fire only on submit button clientclick pls help thanks in advance...

RAJ said...

sir i got the solution to avoid validation on reset button..i just set usesubmitbehaviour of resetbutton "false" and added type=reset on reset button..now its working fine for me on submit validation occurs and on reset all history is cleared..thanks sir your article is awesome.....but pls help me for fileupload control i want to restrict file size(only 2mb file allowed) how to do this...

Suresh Dasari said...

@Raj...
Check this article to restrict file upload size
http://www.aspdotnet-suresh.com/2010/12/how-to-restrict-size-of-upload-file-in.html

Anonymous said...

hi
as i see in previous question you have not answered how to use this code in masterpage- scenario . can you explain this as it is not working in this scenario.

Suresh Dasari said...

if you want to use it in master page you need to use the same code and place the script files in master page also then it will work for you.

Anonymous said...

I am using js files references in master page but still its not working for me.

Anonymous said...

I am using js refrences in master page and

script type="text/javascript"
jQuery(document).ready(function()
{
jQuery("#form1").validationEngine();
});
/script

this code am also using in master page still i am unable to call validations.

Suresh Dasari said...

Please check your form id whether is it form1 or not. Here in jQuery("#form1").validationEngine(); statement i am using form id value.

RAJ said...

sir m using your validation code m having two radio buttons (eg: for sale and for rent ) and i want to the user to select atleast one option how to validate that using this plugin m not getting it..pls help

Manish Kumar said...
This comment has been removed by the author.
RAJ said...

@manish kumar hey manish remove the form tag from master page and add form tag on every page inside master and give id "form1" to very page and paste the jquery function

jQuery(document).ready(function () {
jQuery("#form1").validationEngine();
});

on top of every page it will work for you...for me it worked..




Zulfi said...

Suresh sir... you are inspiration.
love u for all these demos and code.
makes life so easy

chetan patil said...

Hi sir i am use this code by using master page ,
and i am add script child as well as master page also but it is not working.
give me one reply how it will done by using master page?

Zulfi said...

Hi Chetan I did the same thing and it was not working.
To work around after running your application just view the source of the page from the browser and check id of form what it is coming. Use that form id in your code and it will work perfectly.
Usually it is aspnetform

pinkey said...

nice post

Anonymous said...

On using this jquery files(jquery.validationEngine,jquery.validationEngine-en,jquery-1.6.min) from the above sample code getting problems in screen, sliding menu which uses older version of jquery-min. Kindly guide me to overcome from this problem

Ravindran N said...

Hi

How to disable validation for Clear Button

Ravindran N said...
This comment has been removed by the author.
simon said...

Hi sir
dropdown validation is not working sir.. what to do sir......

hahahuhu said...

Hi, it is a great work
However for me it is working in firefox but not in IE (9). Any idea what to do to run it in IE?

Prachi Chandrakar said...

Your are genius.Hats off.

Sushant said...

Hi Suresh,

If i am validating the email field and the textbox has not any value then how can i only show the required field validation message.

Currently it's showing required field message as well as the url validation messgae at a time.

if any user enter any string in email textbox then only the url validation will get fired.

Looking forward for your earliest response.

Thanks in advance.

mcvjxhv said...

vb cv

Sarveshwaran Sigamani said...

WOW superb nice article suresh,keep rocking

Rajkumar said...

Hi Suresh !

How can i validate div instead of form?

Because my web page contains lot of buttons.If i click any the button validation occurs..

Thank you..

Anonymous said...

good

hardik ghodasara said...

how to use your JQuery form validations example in asp.net with masterpage ? please send me one example of this . in my e-mail id

my id is hard.ghodasara@gmail.com

Ankur's blog said...

hello suresh sir this code very helpful for me
but in example message is display once than if we fill value in text box than give tab that time it is hide but i want to hide at the filling time of text box

to do this type validation what i want to do
Plz help me

Anonymous said...

hi suresh i want to do same validation for submit

it showing validation message as weel as postback to the server

sonesh kumar Singh said...

You Gave answer at September 18, 2012 at 9:58 PM,
if you want to use it in master page you need to use the same code and place the script files in master page also then it will work for you.

But it is not working

Please help me

I have a master page and has a form Id . That's why in all project FormId is not use anywhere . Then how i used it.

Anonymous said...

Hii..
I am solved the qurrries related to master page..
Plz used following code..

When .net renders it changes the Form id so instead of using:

jQuery("#form1").validationEngine();

Please use:

jQuery("form").validationEngine();

Happy coding...

Anonymous said...

Any help for checkboxlist Validation....

Chirag Makwana said...

Hi, Suresh
This validation is not properly working with master page. click event is fire but validation not not fire.

DHARMESH said...

Thank you very much....suresh & Anonymous I done it properly in master page form.

vipul said...

Hi Suresh...

It's really amazing article you have post.

i want to use this validtation js using custom message instead of static message as you have defined in js.

will it be possible to do that ?

Anonymous said...

Great jquery validation
by unitedwebsoft

Anonymous said...

How i use for radiobuttonlist and Checkbuttonlist button?

Dev said...

Dev
Accept only alphabets in First Name and Last Name and only numbers in Contact Number field(Additional field)?

Eshwar Madhu said...

How i use for radiobuttonlist and Checkbuttonlist button?

using this validation engine

Thanks&Regards
Maddeswar K.

Anonymous said...

can u please suggest me how we can compare two text boxes
(i.e password textbox and confirm password textbox

Sandeep Soni said...

hiii suresh i just want to add new field that is password compare...how i can compare two fields password and re password using this above style ......plz update

Jack Turner said...

very good ......u have done a great job.Thank u so much at Allied Packers

Jitender Rana said...

Hi Friends,
those people are facing the issue of Jquery validation fail while using Master Page. they search the form id in source page after running the project. In Source Page whatever Form ID is being made, Copy the Form ID and Paste inside the jquery document.get ready function in master page or any page which uses master page. after giving the right Form ID to the Jquery validationEngine() function, the Jquery velidation will start working. If still you face same problem. you can send me request mail at my EmailID i.e jatinrana1988@gmail.com, i will send you test solution.

Nitin Yadav said...

How can I use validation engine on button instead of type=submit ?

Pawan said...

How do i use for radio buttonlist and Checkbutton list button?

Anita said...

hi great tutorial

Anonymous said...

i tried with master page from the form name generated in asp.net but it did not work..suggestions please

suffian ahmed said...

can u please upload one new projects after adding the user request again, we realy appricate ur work. visit www.webnoesys.com. suffian ahmed

Ashok Kumawat said...

nice but ..how can i use with cancel button plzz reply....

rahul parab said...

I have tried with master pages inside modal popups but validations shuffle like popup goes and validation messages remains still.

Raj Kumar said...

Suresh Sir, I've created a master page. And in Content Page there is a jQuery function(according to u article) which is using form id(form1). The problem is that form/form ID is in Master Page.That'swhy this jQuery function is not working in Content Page. Pls help me by giving a hint/solution.
Email id: raj.developerknp@gmail.com

Mohammad Zakariya said...

Sir i want use compare password between two textbox
using jquery function in asp.net c# plz help me.

Raj Kumar said...

Dear Sir,
i also want to compare 'password' and 'ConfirmPassword'.
How to achieve this?

Unknown said...

How can I use validation for "Date"

Pradnyakar Badge said...

hi suresh
It is very nice work but it is not working in Content pages, how I can achieve as on Content page
Plz help...

Sumeet said...

hey awesome article .....
this is very helpful for me....

Pandiyan N said...

hi suresh
i have 2 buttons in form "Submit" and "Cancel". i want validation process when click the submit button. but it works when click cancel button also. how can solve it. plz help

Anonymous said...

Hi Suresh

How can i add css class to text box/Drop down list if i add CssClass="validate[required]"?

Tarun Vats said...

Hi..suresh.
My browser is unable to find the validationEngine() method and showing the error.Please tell me how i can find this method.

Anonymous said...

how to use on master page i check all above ie like form id and all but is not working

thanks

Gagan rajpal said...

thanku sir u r doing a good job for fresher....

ur code is properly executed...can u tell me if we want only character value aloow within textbox

Advance Thanks

ningu walikar said...

Thanku Suresh:-)

lionelvilla said...

i have used validation using javascript(jquery) and then i apply that validation to asp.net controls in ajax update panel.Although the validations works fine but the problem is that the event of button control is not being blocked, so the validation occurs correctly but still the button event code is executed..which i dont want,n e help ??

shyam sapkal said...

Hi Suresh, this validation is not working in Responsive html ....:( plz help me
how can i change the position of validation popup box?

yogeesha sp said...

Sir This is not working For Master page And i given table inside the Form its showing error

Its error Showing like "A page can have only one server-side Form tag." how can i solve this please help me"
my mail id
yogeeshsp@gmail.com

Harish Kaushik said...

I have a login form on my master page and another one is on content page. I mention the form tag on master page . but when I run my project , the login form of master page also effects by clicking the button on content page. I tried but not solved. What I need to do..?

Anonymous said...

how can i compare two password textbox using this equals format?

Santhosh Subramanian said...

i have used validation using javascript(jquery) and then i apply that validation to asp.net controls in ajax update panel.Although the validations works fine but the problem is that the event of button control is not being blocked, so the validation occurs correctly but still the button event code is executed..which i dont want,n e help ??

Chitra said...

I have used this code it can be work. but it cant be work in pages which have master page. Any one know how to used it in pages which have master page?

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.