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.
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 .
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 Email
|
|||
117 comments :
Thanks....
Present am looking for this..
Nice
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. .
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
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...
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.
@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.
How we can set causevalidation="false" property of this button.. Using these validations
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?
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!
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!
how to validate dropdownlist if i will bind dropdownlist dynamically
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
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
I am not finding any attachments for css and JQuery... could you please provide me CSS and JQuery...
@Sriniva.....
Everything is there in folder check it once......
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::--
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::--
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
in master page this jquery will not work any possible to work with master page
very nice client side validation by Jquery with ASP.NET.
by Bhupesh Kumar xpert infotech
How to Use It In Content Page without Form Tag
Hi Suresh,
This article looks good. where i can find the attached folder?
...Das
@Das...
In post i added DownLoad Sample Code Attached please check it and download it
Thank you Suresh,
Nice post.... Keep Posting.
...Das
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
Its is not working with master page. how do I use it with masterpage
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????
Hi Suresh,
How can I set rules when I use from validation...like datetime range, compare password etc...
Please reply............
Where are you assigning the error message like "*Invalid URL"
this example not working in master page scenario ..
hi sir ,
please provide the code for validating
radio button list & check box list & list view
hi sir ,
How to validate
radio button list & check box list & list view..
very urgent please,.............
Hi suresh,
How can i show the validation message one by one in button click.
Thanks in advance.
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...
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...
@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
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.
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.
I am using js files references in master page but still its not working for me.
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.
Please check your form id whether is it form1 or not. Here in jQuery("#form1").validationEngine(); statement i am using form id value.
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 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..
Suresh sir... you are inspiration.
love u for all these demos and code.
makes life so easy
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?
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
nice post
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
Hi
How to disable validation for Clear Button
Hi sir
dropdown validation is not working sir.. what to do sir......
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?
Your are genius.Hats off.
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.
vb cv
WOW superb nice article suresh,keep rocking
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..
good
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
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
hi suresh i want to do same validation for submit
it showing validation message as weel as postback to the server
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.
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...
Any help for checkboxlist Validation....
Hi, Suresh
This validation is not properly working with master page. click event is fire but validation not not fire.
Thank you very much....suresh & Anonymous I done it properly in master page form.
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 ?
Great jquery validation
by unitedwebsoft
How i use for radiobuttonlist and Checkbuttonlist button?
Dev
Accept only alphabets in First Name and Last Name and only numbers in Contact Number field(Additional field)?
How i use for radiobuttonlist and Checkbuttonlist button?
using this validation engine
Thanks&Regards
Maddeswar K.
can u please suggest me how we can compare two text boxes
(i.e password textbox and confirm password textbox
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
very good ......u have done a great job.Thank u so much at Allied Packers
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.
How can I use validation engine on button instead of type=submit ?
How do i use for radio buttonlist and Checkbutton list button?
hi great tutorial
i tried with master page from the form name generated in asp.net but it did not work..suggestions please
can u please upload one new projects after adding the user request again, we realy appricate ur work. visit www.webnoesys.com. suffian ahmed
nice but ..how can i use with cancel button plzz reply....
I have tried with master pages inside modal popups but validations shuffle like popup goes and validation messages remains still.
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
Sir i want use compare password between two textbox
using jquery function in asp.net c# plz help me.
Dear Sir,
i also want to compare 'password' and 'ConfirmPassword'.
How to achieve this?
How can I use validation for "Date"
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...
hey awesome article .....
this is very helpful for me....
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
Hi Suresh
How can i add css class to text box/Drop down list if i add CssClass="validate[required]"?
Hi..suresh.
My browser is unable to find the validationEngine() method and showing the error.Please tell me how i can find this method.
how to use on master page i check all above ie like form id and all but is not working
thanks
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
Thanku Suresh:-)
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 ??
Hi Suresh, this validation is not working in Responsive html ....:( plz help me
how can i change the position of validation popup box?
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
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..?
how can i compare two password textbox using this equals format?
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 ??
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?
Hi Suresh. Well done.
Code is working Great.
I m using your jQuery validation in my web application.
i've two dropdown list. One is for min and second is for max.
first dropdown list's value should be less than the value of second
dropdown list. Can you write code it?
Please Sir delete first and second index in country drop down list...
Sir I m using Master-Content page simple reg. form with gridview edit delete button and its working fine when clicking on submit button, but clicking on delete button its again asking for validations.
Please help me out. I m googling for solutions from 2-3 days cause i liked this kind of validations.
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?
Please help me..... please
Hi
Awesome article
How can i pass regex or min,max(datatype range) values from css class.
like: class="Validate[some regex here]"
class=Validate[min,max]
Hi Suresh,
I am using choosen.js for dropdown and thus facing the validation issue.
Also validation is not working for checkboxlist.
Please suggest me how to validate the above mentioned two of the controls.
Looking for your earliest response.
hello sir,
How to Use It In Content Page without Form Tag
its very useful ...............
Thanks Bro its Working...............
Thanks Suresh...I am exactly looking for it...But when I use jquery-2.1.3 instead of jquery-1.6 its not work...
Hi suresh, Your articles are really worth,
Have big query in when we are using master page so id of control of content page would be something like "ContentPlaceHolder1_txtfnm" so validation is based on id of control and is gonna check the id which is only txtfnm so my question is how to fix or how validation checks the id=ContentPlaceHolder1_txtfnm,
Let me clear you that i have server controls used in master page as well so form tag is required at master page only....
Thanks in advance
Note: Only a member of this blog may post a comment.