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
|
|||
|
|
69 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.