title: Jquery Validation plugin with Asp.net masterpage not working
body: <p>hello i'm using jquery validation plug-in, its not showing any message</p>
  
  <p>my javascript is</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
           $(document).ready(function () {
  
               $('#mainform').validate({
                   rules: {
                       DishNameTextBox: { required: true, minlength: 2 },
                       DishDescriptionTextBox: { required: true }
                   },
                   highlight: function (label) {
                       alert('hi');
                       $(label).closest('.control-group').addClass('error');
                   },
                   success: function (label) {
  
                       label
                           .text('OK!').addClass('valid')
                           .closest('.control-group').addClass('success');
                   }
               });
           });
       &lt;/script&gt;
  </code></pre>
  
  <p>I'm using masterpage, its HTML is as below</p>
  
  <pre><code>&lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;        window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.8.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
       &lt;script src="js/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;link href="css/bootstrapNew.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
      &lt;link href="css/Custom.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="themes/default/default.css" rel="stylesheet" type="text/css" /&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form runat="server" id="mainform"&gt;
      &lt;uc1:TopNavigationUserControl ID="TopNavigationUserControl1" runat="server" /&gt;
      &lt;asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i,m not sure where I'm going wrong.</p>
  
  <p>please help as i have already wasted 5 hrs debugging this issue with out any luck.. :(</p>
  
  <p>ok..here is my viewsource.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;&lt;title&gt;
  
  &lt;/title&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;        window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.8.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
       &lt;script src="js/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;link href="css/bootstrapNew.css" rel="stylesheet" type="text/css" /&gt;&lt;link rel="stylesheet" href="css/main.css" /&gt;&lt;link href="css/Custom.css" rel="stylesheet" type="text/css" /&gt;&lt;link href="themes/default/default.css" rel="stylesheet" type="text/css" /&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form method="post" action="ListingNew.aspx" id="mainform"&gt;
  &lt;div class="aspNetHidden"&gt;
  &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUwMzgyNTgzOQ9kFgJmD2QWAgIDD2QWAgIBD2QWAgIHD2QWBAIBDxYCHgRocmVmBTlBdXRoZXRpY2F0aW9uUmVkaXJlY3Rpb24uYXNweD9SZWRpcmVjdFVybD1MaXN0aW5nTmV3LmFzcHhkAgMPFgIfAAU5QXV0aGV0aWNhdGlvblJlZGlyZWN0aW9uLmFzcHg/UmVkaXJlY3RVcmw9TGlzdGluZ05ldy5hc3B4ZGS3V8AKZc9NhSdqUZ2aX1LviwL8XQhOzd4kclkeoKvXZw==" /&gt;
  &lt;/div&gt;
  
  &lt;div class="aspNetHidden"&gt;
  
      &lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwL3i6GVDwKcgKH7AgLYwYSQBQKJ9q3+BgKGmYeQCgKHmYeQCgKEmYeQCgKFmYeQCgKCmYeQCgKCmZOTCgL0jMC/B2nnxU9EgXEphsgiaKRpHC6YUG09Nnz/Q/pjswj/I9Po" /&gt;
  &lt;/div&gt;
  
  &lt;div class="navbar navbar-fixed-top"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;&lt;span
                      class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/a&gt;&lt;a class="brand" href="/Home.aspx"&gt;
                      Khana-wal&lt;/a&gt;
                  &lt;div class="nav-collapse collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle js-activated" href="#"&gt;Browse Dishes
                              &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Most Popular&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Near to you&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;a class="btn btn-primary pull-right" style="margin-left: 20px" href="NewListing.aspx"&gt;Add Your Dish&lt;/a&gt;
  
  
  
  
  
  
  
                      &lt;ul id="TopNavigationUserControl1_LoginUl" class="nav pull-right"&gt;
                          &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle js-activated" href="#"&gt;Login&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="AutheticationRedirection.aspx?RedirectUrl=ListingNew.aspx" id="TopNavigationUserControl1_FaceBookRedirectUrl" tabindex="-1"&gt;FaceBook&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="AutheticationRedirection.aspx?RedirectUrl=ListingNew.aspx" id="TopNavigationUserControl1_TwitterRedirectUrl" tabindex="-1"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!-- .nav-collapse --&gt;
              &lt;/div&gt;
              &lt;!-- .container --&gt;
          &lt;/div&gt;
          &lt;!-- .navbav-inner --&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          // very simple to use!
          $(document).ready(function () {
              $('.js-activated').dropdownHover(true);
          });
      &lt;/script&gt;
  
  
  
  
  
      &lt;div class="container" style="margin-top: 60px"&gt;
          &lt;div class="span12"&gt;
              &lt;div class="navbar-inner" style="text-align: center"&gt;
                  &lt;h5&gt;
                      Add New Dish&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="form-horizontal" style="margin-top: 10px"&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="DishNameTextBox"&gt;
                          Dish Name&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input name="ctl00$ContentPlaceHolderMain$DishNameTextBox" type="text" id="DishNameTextBox" name="DishNameTextBox" style="width:300px;" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="DishDescriptionTextBox"&gt;
                          Dish Description&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;textarea name="ctl00$ContentPlaceHolderMain$DishDescriptionTextBox" rows="20" cols="40" id="DishDescriptionTextBox" style="height:250px;width:500px;"&gt;
  &lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="PeopleDropDownList"&gt;
                          People &lt;i class="icon-question-sign" rel="tooltip" title="How many people can sufficiently eat in a single dish"&gt;
                          &lt;/i&gt;
                      &lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;select name="ctl00$ContentPlaceHolderMain$PeopleDropDownList" id="ContentPlaceHolderMain_PeopleDropDownList"&gt;
      &lt;option value=""&gt;-- Select --&lt;/option&gt;
      &lt;option selected="selected" value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;option value="4"&gt;4&lt;/option&gt;
      &lt;option value="5"&gt;5&lt;/option&gt;
      &lt;option value="5+"&gt;5+&lt;/option&gt;
  
  &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="submit" name="ctl00$ContentPlaceHolderMain$btnSave" value="Connect To facebook and Save" id="ContentPlaceHolderMain_btnSave" class="btn btn-primary" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;/form&gt;
  
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(function () {
  
              $('#mainform').validate({
                  rules: {
                      DishNameTextBox: "required",
                      DishDescriptionTextBox: { required: true }
                  },
                  highlight: function (label) {
                      alert('hi');
                      $(label).closest('.control-group').addClass('error');
                  },
                  success: function (label) {
  
                      label
                           .text('OK!').addClass('valid')
                           .closest('.control-group').addClass('success');
                  }
              });
          });
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <p>For any one who is reading this</p>
  
  <p>1) ClientModeID = "Static" will make your control ID static but not the name[name will be different if you are using master page]</p>
  
  <p>2) Jquery validation plug in works both on <strong>name and id and both should be same</strong>.</p>
  
  <p>I hope it will save some one's time.</p>