Using jQuery Validation in ASP.NET Master Pages

Posted by: Suprotim Agarwal , on 5/1/2009, in Category jQuery and ASP.NET
Views: 250904
Abstract: jQuery has a Validation plug-in which is full of features and is quite flexible. However the name mangling in ASP.NET Master Pages presents interesting challenges in using this plug-in and I could not find a working solution on the net. In this article, I will demonstrate how to use the jQuery Validation plug-in with Master Pages
Using jQuery Validation in ASP.NET Master Pages
 
Sometime back, I had written an article on Using jQuery with the ASP.NET CustomValidator Control. jQuery also has a Validation plug-in which is full of features and is quite flexible. However the name mangling in ASP.NET Master Pages presents interesting challenges in using this plug-in with it and I could not find a working solution on the net. In this article, I will demonstrate how to use the jQuery Validation plug-in with Master Pages. This article does not compare jQuery validation with ASP.NET Validation Controls, but has been written with the intention of demonstrating how jQuery Validation can be used in ASP.NET.
Note: ASP.NET Validation controls runs on client as well as server side, and you should ‘always’ perform validation on server-side.
I assume you are familiar with jQuery. If you are new to jQuery, then before moving ahead, I would recommend you to check out Using jQuery with ASP.NET - A Beginner's Guide. Please do take a note that this example uses jQuery’s current version - jQuery 1.3.2 and jQuery 1.3.2 Visual Studio 2008 Autocomplete documentation.
jQuery Validation Plug-in
bassisstance.de has provided a cool jQuery Validation Plugin that has the following features(only a few listed here):
-      Standard validation methods for validating fields like emails, digits, date, URLs, credit card numbers and much more.
-      Hide and display error messages as needed
-      Validation on Keyup, Blur, Submit button
-      Flexibility in specifying validation rules
The plug-in runs client-side and suits most of the validation requirement; however there are challenges while implementing it with an ASP.NET application. The challenge gets stronger when we deal with ASP.NET Master Pages. We will see how.
When you are using a MasterPage, the ASP.NET runtime modifies a WebControl’s ClientID, with each level of container prefixing its ID to the control, to ensure uniqueness. So for example, a TextBox called ‘txtName’ gets rendered as ‘ctl00$ContentPlaceHolder1$txtName’ (assuming the container is ContentPlaceHolder1) as shown below:
<input name="ctl00$ContentPlaceHolder1$txtName" type="text id="ctl00_ContentPlaceHolder1_txtName" />
Now the jQuery Validation plug-in relies on elements having a ‘name’ attribute. So referencing a control using $('#<%= txtName.ClientID%>') doesn’t really work with jQuery Validation plug-in. Instead what is needed is to use the controls ‘name’ attribute with the jQuery Validation control. With the name mangling in ASP.NET Master Pages, here’s how to solve the problem
Step 1: Create an ASP.NET website with a Master Page and a Content Page.
Step 2: Download jQuery 1.3.2, jQuery VS 2008 Doc and jQuery Validation plug-in. Create a ‘Scripts’ folder in the Solution Explorer of your project and add these files to this folder.
Assuming you have downloaded these files, create a reference to these files in the <head> section of your Master page as shown below:
<head runat="server">
    <title>jQuery Validation in ASP.NET Master Page</title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
 
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
Step 3: Now go to your ContentPage and add two Textboxes and a Button inside the ContentPlaceHolder as shown below:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
    Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>
Step 4: Now inside this ContentPage, add the following script to enable jQuery Validation
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        $(document).ready(function() {
            $("#aspnetForm").validate({
                rules: {
                    <%=txtName.UniqueID %>: {
                        minlength: 2,
                        required: true
                    },
                     <%=txtEmail.UniqueID %>: {                       
                        required: true,
                        email:true
                    }
                }, messages: {}
            });
        });
    </script>
   
    Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
    Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>
Since the jQuery Validation plug-in relies on elements having a ‘name’ attribute, observe how we are using the UniqueID of the controls to reference them like <%=txtName.UniqueID %> and apply validation rules to them.
Run the application and click on the Submit button. The Validation fires displaying the error messages as shown below
jQuery Validation In Master Pages
On entering invalid data, the following message appears
jQuery Validation
If you want to display custom messages, make use of the ‘messages’ parameter to specify a custom error message for a field as shown below:
    <script type="text/javascript">
        $(document).ready(function() {
            $("#aspnetForm").validate({
                rules: {
                    <%=txtName.UniqueID %>: {
                        minlength: 2,
                        required: true
                    },
                     <%=txtEmail.UniqueID %>: {                       
                        required: true,
                        email:true
                    }
                }, messages: {
                    <%=txtName.UniqueID %>:{
                        required: "* Required Field *",
                        minlength: "* Please enter atleast 2 characters *"
                    }
               }
            });
        });
    </script>
So as seen in the screenshot below, using the ‘messages’ parameter, the error message ‘This field is required’ gets replaced with ‘* Required Field’ . You can also add some css to the error message as per your requirement.
Custom Error Message
That’s it for now. I hope you will now be able to use the jQuery Validation Plug-in with ASP.NET Master Pages. More features about the jQuery Validation Plug-in can be learnt from here.
I hope this article was useful and I thank you for viewing it. The entire source code of this article can be downloaded over here.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
jQuery 3 - New Features and Performance Improvements

HTML Table and jQuery – Handy Code Snippets

jQuery Event Handling Basics - Difference between Bind, Live, Delegate and On

Select / Deselect All CheckBoxes using jQuery

jQuery UI DatePicker - Tips and Tricks

jQuery TreeView with Expand Collapse Icons

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Buzzy on Friday, May 1, 2009 1:31 PM
Mate you are nothing short of a rockstar this article is TOP class (thumbsup)
Comment posted by anup hosur on Sunday, May 3, 2009 2:50 AM
nice article.. i read ur whole blog.. i always found new things.. great..
Comment posted by shihab on Tuesday, May 12, 2009 12:37 AM
Thanks
Comment posted by Frank on Tuesday, May 12, 2009 5:53 AM
Did you know that you don't have to include the vsdoc file?
it knows it automatically..
Comment posted by Suprotim Agarwal on Tuesday, May 12, 2009 12:17 PM
Frank: Yes, that was done by mistake. The reference has been removed. Thanks!
Comment posted by jerry qian on Tuesday, May 12, 2009 9:41 PM
good
Comment posted by Shail on Wednesday, May 13, 2009 3:17 AM
Hello Suprotim,
Nice article, once again hats off to you. Its always fun to read your article. Short and simple, but very useful for practical situations
Comment posted by Brian O'Connell on Wednesday, May 13, 2009 6:04 AM
I'm dissappointed at the approach .net article writers are taking when teaching the use of jQuery. One of jQuery's main selling points is that it facilitate "Unobtrusive" scripting, something unfortunately asp.net developers still ignore.

What it means is all script in external files, all web pages working without script. When it comes to form validation from what I can see the plugin you mention uses class attributes to validate by default. For example an input with a class attribute containing "required" will be validated as such. Same for "url", "email" etc. This means you can do without trying to get around the asp.net renaming mechanism and script unobtrusively.
Comment posted by salman on Wednesday, May 13, 2009 9:10 AM
hi,
good one.could you help me how can i display error message in red color?
Thanking you.
Comment posted by james taylor on Wednesday, May 13, 2009 10:34 AM
nice article.

but i have noticed that this will not work if you are using the jquery ui dialog as the dialog automatically moves the dialog div to the end of the dom outside of the master pages form element.
Comment posted by Taru on Thursday, May 14, 2009 7:42 AM
Good one.counld u tell me how can i validate phone number and display error message in red?
Comment posted by romel on Friday, May 15, 2009 9:39 AM
I agree with Brian O's comment, this validation could be done simpler w/o having to worry about the .Net renaming.  for instance you could have just write this on your script
<script>
....
     $('formnamehere').validate();
</script>

then in your input   <asp:TextBox ID="txtEmail" runat="server" class="required email"></asp:TextBox>
Comment posted by high class call girl on Monday, July 6, 2009 11:20 AM
Very impresive
Comment posted by Martin on Friday, October 9, 2009 3:45 AM
Nice one.
Comment posted by Onkar Shelar on Thursday, November 26, 2009 1:00 AM
I have used jQuery Validation Plug-in to Create an ASP.NET website with a Master Page and a Content Page. I hv follwed all the steps correctly given above...But it gives me error message as "Microsoft JScript runtime error: Object doesn't support this property or method" for the below code which is generated by runtime machine... Plz give me solution for the same...
$("#aspnetForm").validate({
            rules: {
                    ctl00_ContentPlaceHolderRight_txtFirstName: {
                        minlength: 2,
                        required: true
                      },
                    ctl00_ContentPlaceHolderRight_txtLastName: {                      
                        required: true,
                        minlength: 2
                      }
             },
             messages: {
                    ctl00_ContentPlaceHolderRight_txtFirstName:{
                        required: "* Required Field *",
                        minlength: "* Please enter atleast 2 characters *"
                       }
             }
         });        
Comment posted by Suprotim Agarwal on Thursday, November 26, 2009 2:15 AM
Onkar: Did you download the code and test it first?
Comment posted by waleed on Wednesday, December 2, 2009 5:53 PM
Asp.net Master page and JQuery reference – JS Inside Master Pages:
http://ledomoon.blogspot.com/2009/12/aspnet-master-page-and-jquery-reference.html
Comment posted by Manch on Monday, February 8, 2010 1:46 PM
I have textbox with ID="UserName" and ID="Password" inside asp:login control. It works fine if i have CssClass="required" but the problem is i cannot set the custom error message. Even the code below wont work where loginCtrl_UserName is the id generated for the control.
  messages: {
                   loginCtrl_UserName:{
                        required: "* Required Field *",
                        minlength: "* Please enter atleast 2 characters *"
                       }
             }
Comment posted by dami on Monday, March 1, 2010 9:00 PM
First of all, good job =)
Now i've a question, what if you need to validate two diferent forms?
I mean, obviously you can't put two forms in an asp .net page. But what would you do if you have separate groups of inputs used in diferent postabacks. Eg. A registration form in your content page  and a login in the master page. (I actually have that problem :P)
regards
D
Comment posted by anamika on Wednesday, March 10, 2010 2:40 AM
Very nice article,its help me.could u plz tell me how can i insert images and some user control in master page using jquer,like that i do using c#.is it possible or not.plz reply.
Comment posted by anamika on Wednesday, March 10, 2010 2:52 AM
Very nice article,its help me.could u plz tell me how can i insert images and some user control in master page using jquer,like that i do using c#.is it possible or not.plz reply.
Comment posted by gfj on Wednesday, June 23, 2010 5:28 AM
fghjfgh gh ghj gh
Comment posted by Ash on Wednesday, July 21, 2010 11:04 PM
Nice article!
I am getting the following JS error message:
Message: Expected identifier, string or number
Line: 28
Char: 21

Here is JS code:
          $(document).ready(function() {
            $("#EntryForm").validate({
                rules: {
                    <%=txtGroup.UniqueID %>: {  //This is the line the error is pointing to
                        minlength: 2,
                        required: true
                    },
                     <%=txtGroup.UniqueID %>: {                        
                        required: true
                    }
                },
                 messages: {
                    <%=txtGroup.UniqueID %>:{
                        required: "* Required Field *",
                        minlength: "* Please enter atleast 2 characters *"
                    }
                  }
            });
        });
Comment posted by lorena on Friday, August 6, 2010 12:19 AM
hola como estan
Comment posted by mic on Saturday, September 18, 2010 2:56 AM
im having same problem as lik Ash...

I am getting the following JS error message:
Message: Expected identifier, string or number
Line: 28
Char: 21

Here is JS code:
          $(document).ready(function() {
            $("#EntryForm").validate({
                rules: {
                    <%=txtGroup.UniqueID %>: {  //This is the line the error is pointing to
                        minlength: 2,
                        required: true
                    },
                     <%=txtGroup.UniqueID %>: {                        
                        required: true
                    }
                },
                 messages: {
                    <%=txtGroup.UniqueID %>:{
                        required: "* Required Field *",
                        minlength: "* Please enter atleast 2 characters *"
                    }
                  }
            });
        anyhelp help please!!!
Comment posted by Anil Kumar on Friday, September 24, 2010 3:15 PM
first of all very very nice article :Simple, clear and Excellent.
I have a question...
what if we need need to check the controls on a single page into more than one group ?

Any help on this ..
Comment posted by Rajkumar on Wednesday, October 27, 2010 4:38 AM
yours wesite is very good.
cleare Explain....
Comment posted by Brad Williams on Tuesday, February 1, 2011 2:26 PM
Thank you for your article.  I am wondering, what is the reason to use jQuery validation in an ASP.NET web forms application?  I can see the case for when custom validation is needed, but your example is all standard stuff for which there is already standard ASP.NET validation controls, so what is the point?
Comment posted by Suprotim Agarwal on Friday, February 4, 2011 7:02 PM
While doing validation, it's a good idea to use both client and server side validation. If the user has javascript enabled, there won't be a need for a postback every time a validation occurs. Similarly if Javascript is turned off, you are assured that the server side code will execute and validation rules will be applied.
Comment posted by HighHopes on Monday, February 28, 2011 6:50 AM
When i applied this , there's a problem on click button. Validation occurs when tabbing on fields but when i clicked the button , it goes to onclick event without passing the validation. In my onclick button event i made an ajax call to server, so i gets error because the input fields did't validated.
I couldn't get how did you prevent and relate the validation with button click ?

Any help please !
Comment posted by Kamaraj Mahalingam on Thursday, April 7, 2011 6:35 AM
Hi, Nice article. But apparently it is not working for me for the below code. I am new to Jquery and I am trying to implement in ASP.NET 2.0
--------------------
$(document).ready(function() {
          alert("test");
            $("#aspnetForm").validate(
            {
               rules:
               {
                    <%=txtJobName.ClientID%>:
                    {
                        minlength: 2,
                        required: true
                    }
                },
                messages:
                {
                    <%=txtJobName.ClientID%>:
                    {
                        required: "* Required Field ",
                        minlength: "* Please enter atleast 2 characters *"
                    }
                }
            });
        });
---------------------
when I submit the form with txtJobName is empty, it is not displaying the validation message and it goes to next page. But I get "test" alert.

Please help me.
Comment posted by Kamaraj Mahalingam on Thursday, April 7, 2011 6:55 AM
Hi, Nice article. But apparently it is not working for me for the below code. I am new to Jquery and I am trying to implement in ASP.NET 2.0
--------------------
$(document).ready(function() {
          alert("test");
            $("#aspnetForm").validate(
            {
               rules:
               {
                    <%=txtJobName.ClientID%>:
                    {
                        minlength: 2,
                        required: true
                    }
                },
                messages:
                {
                    <%=txtJobName.ClientID%>:
                    {
                        required: "* Required Field ",
                        minlength: "* Please enter atleast 2 characters *"
                    }
                }
            });
        });
---------------------
when I submit the form with txtJobName is empty, it is not displaying the validation message and it goes to next page. But I get "test" alert.

Please help me.
Comment posted by Suprotim Agarwal on Friday, April 8, 2011 3:51 AM
Kamaraj: Did you try to download the source code and compare it with your code. Also try UniqueID instead of ClientID. We are targetting the 'name' attribute here.
Comment posted by pablo on Tuesday, May 3, 2011 10:02 AM
this code work fine only if the project is a web site, if a web application dont work.
Comment posted by pablo on Tuesday, May 3, 2011 10:48 AM
err! this work if a web application, the error: Object doesn't support this property or method is solve adding the jQuery references in the local file, inherits from master page get this error.
Comment posted by Tomas on Thursday, July 28, 2011 12:44 AM
ASP.NET build-in Validation controls offers client-side and server-side validation. If you have replaced them with jQuery validation which do only client-side validation when you have exposed your web application for hackers.
I do not find easy way to implement server-side and client-side jQuery validation. I have pushed to duplicate code and manage both jQuery validation and ASP.NET Validation controls which do server side validation.
Could you share your idea about server-side validation in your case?
Comment posted by test user on Thursday, August 11, 2011 12:44 AM
What about validation groups on the form ? What if there are 2 submit buttons on page & two separate forms ?
Comment posted by Chidiebere Okoronkwo on Friday, October 21, 2011 11:59 AM
Your above <script type="text/javascript">
        $(document).ready(function() {
            $("#aspnetForm").validate({
                rules: {
                    <%=txtName.UniqueID %>: {
                        minlength: 2,
                        required: true
                    },
                     <%=txtEmail.UniqueID %>: {                      
                        required: true,
                        email:true
                    }
                }, messages: {
                    <%=txtName.UniqueID %>:{
                        required: "* Required Field *",
                        minlength: "* Please enter atleast 2 characters *"
                    }
               }
            });
        });
    </script>

throws error and your source code is not available. Please could forward it to me.
Comment posted by Chidiebere Okoronkwo on Monday, October 24, 2011 5:14 AM
How do you validate a drop down/combobox?
Comment posted by can erçetin on Tuesday, December 20, 2011 2:48 PM
point shot ;)
Thanks bro. it is lite and useful.
Comment posted by sushant on Tuesday, September 11, 2012 7:44 AM
Hi suprotim,
Nice article. Just one question. jQuery Validation plug-in is not accessible[ not found message coming up[..could u plse link this]
Comment posted by Albarhami on Sunday, November 4, 2012 11:23 PM

I have an issue<< Help please (my email is saeedalbarhami@yahoo.com or post solution here thanks):
i am validationg webparts and application pages for sharepoint using jquery validate()

the jquery validation works fine and checks all the rules and displaying messages as well,but the issue is that:
  
if the rules are fine the submit button works and submits data as many times as the validation never fails but once the validation fails for any reason such required field, the user corrects the error and try to submit the data again but the button no more is submitting even if the validation is corrected
  

Collapse | Copy Code
$("#form1").validate({

        rules: {  <%=TextBox1.UniqueID%>:{ required: true },  <%=TextBox2.UniqueID%>: { required: true} },
        messages: {
             <%=TextBox1.UniqueID%>: { required: "<span  style='color:black'>* Required Field *</span>" },

             <%=TextBox2.UniqueID%>: { required: "<span  style='color:red'>* Required Field *</span>" }
        },
        errorLabelContainer: "#errorcontainer",
        wrapper: 'li'

    });  
Note: The exact same code is working fine in asp.net normal and master pages .
Comment posted by Parag Pathari on Sunday, December 30, 2012 11:58 PM
I am using jquery validation in asp.net master pages.entire thing working fine except initially above the row of name i am getting 'ctl00$ContentPlaceHolder1$txtName ' in browser
Comment posted by granadaCoder on Thursday, January 10, 2013 9:37 AM
What is the significance of "#aspnetForm"...... (as in, why is that name used, if I place another name there, the code fails)?  I only see it one place (where it is checking for the object)....and I don't see a corresponding object with that same name.

The master page has:
    <form id="form1" runat="server">

But thank you for the example.  

Comment posted by granadaCoder on Thursday, January 10, 2013 9:41 AM
Nevermind.  I figured it out.  When using MasterPages, that is the default name that Microsoft gives the form, embedded in the child page.  I looked at the source-output, and saw the (default) name.  I googled it, and there were lots of posts about how to override the (default) name.  

Anyway.  Maybe these 2 posts will clear something up for future readers.
Comment posted by joddz on Thursday, January 17, 2013 9:15 AM
Doesn't work in data controls like datalist. Got code for that?
Comment posted by Richard Stuppi on Tuesday, February 5, 2013 12:36 AM
Excellent article, got me validating like a pro!
Comment posted by anonyms on Sunday, May 5, 2013 4:38 PM
I m getting error at line
<%=txtName.UniqueID %>: {

error: Expected identifier string or number
Comment posted by Renee on Wednesday, May 29, 2013 4:21 PM
I have the code working but would like to add clear/cancel button that would skip the validation using a master page
Comment posted by Swamy Batchu on Thursday, July 25, 2013 11:44 PM
Hi if you place the   <%=txtJobName.ClientID%> in Seperate JavaScript file it will not work as expected because the asp.net server tag will not be evaluated .If you place this code in the <script> tag in page it will work as expected
Comment posted by Ashish on Wednesday, July 31, 2013 1:16 AM
My Code is
Comment posted by Ashish on Wednesday, July 31, 2013 1:18 AM
My Code is

Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Validation.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery Validation in ASP.NET Master Page</title>
    <%--<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>--%>
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

ASPX page:

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Validation.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#aspnetForm").validate({
                rules: {
                    txtName: {
                        minlength: 2,
                        required: true
                    },
                    txtEmail: {
                        required: true,
                        email: true
                    }
                }, messages: {}
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        
  
    Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
    Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>

****************
Still it is not showing any error message
Please help.
Comment posted by Ashish on Wednesday, July 31, 2013 1:26 AM
My Code is

Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Validation.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery Validation in ASP.NET Master Page</title>
    <%--<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>--%>
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

ASPX page:

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Validation.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#aspnetForm").validate({
                rules: {
                    txtName: {
                        minlength: 2,
                        required: true
                    },
                    txtEmail: {
                        required: true,
                        email: true
                    }
                }, messages: {}
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        
  
    Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
    Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>

****************
Still it is not showing any error message
Please help.
Comment posted by Hima on Tuesday, September 24, 2013 7:20 AM
Hi thanks for the code it works like a magic but I have got a html control with no runat=server how can I access this control? It throws error if I do this: `<%=schemeType.UniqueID %>` and doesn't appear to work this way either `schemeType`. How can I refer this id? please reply. thank you in advance
Comment posted by Hima on Tuesday, September 24, 2013 7:23 AM
Hi thanks for the code it works like a magic but I have got a html control with no runat=server how can I access this control? It throws error if I do this: `<%=schemeType.UniqueID %>` and doesn't appear to work this way either `schemeType`. How can I refer this id? please reply. thank you in advance
Comment posted by Hima on Tuesday, September 24, 2013 9:40 AM
Hi thanks for the code it works like a magic but I have got a html control with no runat=server how can I access this control? It throws error if I do this: `<%=schemeType.UniqueID %>` and doesn't appear to work this way either `schemeType`. How can I refer this id? please reply. thank you in advance
Comment posted by Julio Soares on Thursday, October 31, 2013 10:12 AM
Great !
Comment posted by Peter on Thursday, November 28, 2013 2:17 PM
Thanks for this article, I was banging my head for like a few hours.  
Comment posted by Abhishek on Friday, January 3, 2014 12:41 AM
Hi thanks for the code it is very helpful but instead of asp:button i have input type button and the same does not work for it. Could you please help me to find out the solution to work with input type button. Thanks in advance.