title: Using ajax/jQuery Form Validation on ASP.NET controls
body: <p>Good Day</p>
  
  <p>I am using an ASP.NET page with a master page. I want to do live form validation on the input fields (). Now all the tuts and demos/plugins I have seen are using normal html labels. I tried to implement some of them on my form, but they are not working. (I am using a mater page and a normal aspx web form...)</p>
  
  <p>UPDATE: Issue replacing input tags with asp controls for the password fields...</p>
  
  <p>The original input elements</p>
  
  <pre><code>  &lt;fieldset&gt;
          &lt;legend&gt;Validating a complete form&lt;/legend&gt;
          &lt;p&gt;
              &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
              &lt;input id="firstname" name="firstname" type="text" /&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
              &lt;input id="lastname" name="lastname" type="text" /&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label for="username"&gt;Username&lt;/label&gt;
              &lt;input id="username" name="username" type="text" /&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
              &lt;input id="password" name="password" type="password" /&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label for="confirm_password"&gt;Confirm password&lt;/label&gt;
              &lt;input id="confirm_password" name="confirm_password" type="password" /&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label for="email"&gt;Email&lt;/label&gt;
              &lt;input id="email" name="email" type="email" /&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label for="agree"&gt;Please agree to our policy&lt;/label&gt;
              &lt;input type="checkbox" class="checkbox" id="agree" name="agree" /&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label for="newsletter"&gt;I'd like to receive the newsletter&lt;/label&gt;
              &lt;input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /&gt;
          &lt;/p&gt;
  
          &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="LabelEmail" runat="server" Text="Email Address (to be used as username):"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox name="email" type="email" ID="TextBoxEmail" runat="server" ClientIDMode="Static" TextMode="SingleLine" MaxLength="50"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="Label1" runat="server" Text="Postal Address:"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox ID="TextBoxPostal" runat="server" ClientIDMode="Static" TextMode="MultiLine" Rows="4" MaxLength="250"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="LabelPassword" runat="server" Text="Password:"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox name="password" type="password" ID="TextBoxPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="LabelConfirmPassword" runat="server" Text="Confirm Password:"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox name="confirm_password" type="password" ID="TextBoxConfirmPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>I want to replace the above with the following ASP controls</p>
  
  <pre><code>        &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="LabelEmail" runat="server" Text="Email Address (to be used as username):"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox name="email" type="email" ID="TextBoxEmail" runat="server" ClientIDMode="Static" TextMode="SingleLine" MaxLength="50"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="Label1" runat="server" Text="Postal Address:"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox ID="TextBoxPostal" runat="server" ClientIDMode="Static" TextMode="MultiLine" Rows="4" MaxLength="250"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="LabelPassword" runat="server" Text="Password:"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox name="password" type="password" ID="TextBoxPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="tdRight"&gt;&lt;asp:Label ID="LabelConfirmPassword" runat="server" Text="Confirm Password:"&gt;&lt;/asp:Label&gt;&lt;/td&gt;
              &lt;td class="tdLeft"&gt;&lt;asp:TextBox name="confirm_password" type="password" ID="TextBoxConfirmPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p><strong>Now everything works, except for the password fiels? Why? Also, ID's do not matter, as the the validator work on the name and type fields...</strong></p>
  
  <p>jQuery:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          $.validator.setDefaults({
              submitHandler: function () { alert("submitted!"); }
          });
  
          $().ready(function () {
  
  
              // validate signup form on keyup and submit
              $("form").validate({
                  rules: {
                      firstname: "required",
                      lastname: "required",
                      username: {
                          required: true,
                          minlength: 2
                      },
                      password: {
                          required: true,
                          minlength: 5
                      },
                      confirm_password: {
                          required: true,
                          minlength: 5,
                          equalTo: "#password"
                      },
                      email: {
                          required: true,
                          email: true
                      },
                      topic: {
                          required: "#newsletter:checked",
                          minlength: 2
                      },
                      agree: "required"
                  },
                  messages: {
                      firstname: "Please enter your firstname",
                      lastname: "Please enter your lastname",
                      username: {
                          required: "Please enter a username",
                          minlength: "Your username must consist of at least 2 characters"
                      },
                      password: {
                          required: "Please provide a password",
                          minlength: "Your password must be at least 5 characters long"
                      },
                      confirm_password: {
                          required: "Please provide a password",
                          minlength: "Your password must be at least 5 characters long",
                          equalTo: "Please enter the same password as above"
                      },
                      email: "Please enter a valid email address",
                      agree: "Please accept our policy"
                  }
              });
  
              // propose username by combining first- and lastname
              $("#username").focus(function () {
                  var firstname = $("#firstname").val();
                  var lastname = $("#lastname").val();
                  if (firstname &amp;&amp; lastname &amp;&amp; !this.value) {
                      this.value = firstname + "." + lastname;
                  }
              });
  
              //code to hide topic selection, disable for demo
              var newsletter = $("#newsletter");
              // newsletter topics are optional, hide at first
              var inital = newsletter.is(":checked");
              var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
              var topicInputs = topics.find("input").attr("disabled", !inital);
              // show when newsletter is checked
              newsletter.click(function () {
                  topics[this.checked ? "removeClass" : "addClass"]("gray");
                  topicInputs.attr("disabled", !this.checked);
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>The REAL RENDERED HTML (pertaining the form)</strong></p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
  type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="Scripts/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $.validator.setDefaults({
          submitHandler: function() {
              alert("submitted!");
          }
      });
  
      $().ready(function() {
  
  
          // validate signup form on keyup and submit
          $("form").validate({
              rules: {
                  firstname: "required",
                  lastname: "required",
                  username: {
                      required: true,
                      minlength: 2
                  },
                  password: {
                      required: true,
                      minlength: 5
                  },
                  confirm_password: {
                      required: true,
                      minlength: 5,
                      equalTo: "#password"
                  },
                  email: {
                      required: true,
                      email: true
                  },
                  topic: {
                      required: "#newsletter:checked",
                      minlength: 2
                  },
                  agree: "required"
              },
              messages: {
                  firstname: "Please enter your firstname",
                  lastname: "Please enter your lastname",
                  username: {
                      required: "Please enter a username",
                      minlength: "Your username must consist of at least 2 characters"
                  },
                  password: {
                      required: "Please provide a password",
                      minlength: "Your password must be at least 5 characters long"
                  },
                  confirm_password: {
                      required: "Please provide a password",
                      minlength: "Your password must be at least 5 characters long",
                      equalTo: "Please enter the same password as above"
                  },
                  email: "Please enter a valid email address",
                  agree: "Please accept our policy"
              }
          });
  
          // propose username by combining first- and lastname
          $("#username").focus(function() {
              var firstname = $("#firstname").val();
              var lastname = $("#lastname").val();
              if (firstname &amp;&amp; lastname &amp;&amp; !this.value) {
                  this.value = firstname + "." + lastname;
              }
          });
  
          //code to hide topic selection, disable for demo
          var newsletter = $("#newsletter");
          // newsletter topics are optional, hide at first
          var inital = newsletter.is(":checked");
          var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
          var topicInputs = topics.find("input").attr("disabled", !inital);
          // show when newsletter is checked
          newsletter.click(function() {
              topics[this.checked ? "removeClass" : "addClass"]("gray");
              topicInputs.attr("disabled", !this.checked);
          });
      });
  &lt;/script&gt;
  &lt;form method="get" action="SignupPersonal.aspx" id="aspnetForm"
  class="cmxform"&gt;
      &lt;div class="aspNetHidden"&gt;
          &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMjk5MTc4MzEPZBYCZg9kFgICBQ9kFgICAQ9kFgICMA8QDxYGHg1EYXRhVGV4dEZpZWxkBQ9FbnVtRGVzY3JpcHRpb24eDkRhdGFWYWx1ZUZpZWxkBQlFbnVtVmFsdWUeC18hRGF0YUJvdW5kZ2QQFQMFRW1haWwlTm90aWZpY2F0aW9uIHZpYSBNb2JpbGUgVGV4dCBNZXNzYWdlcwRCb3RoFQMBMAExATIUKwMDZ2dnZGRksmDjLifKF4+hMs8AhfX/bwcgvt2QqQRuZWngXcH7AGM="
          /&gt;
      &lt;/div&gt;
      &lt;div class="aspNetHidden"&gt;
          &lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdABBfr2cGXQNKgk5u/suiS/eBMBPtPHD3IbRvk+yxeYb2457gKW6aCQ3yNBTG9LyKZ4cubOXF5tOYlsiIBcyrDbyQ4wKHhHIVKN2DCQeFUhf9fWAUCuZOob8WzLZCHNXad+6lH/vCaPfCLoThuEr+9Jzl6wAt6cuJ+L+27/Nrmm6upAz//swWW9Bijj8L66VLU8Xqa57A90pLu4vVlIQKRMNCPMnVTRV7QuT7xghzXApY9g0EIzfFocd5Qmeb8RCzKLnYNu/sHr3w5Hv9l1IOx6mNGOqE5LWQWcaFAwIxNHVtD2pkSrWzz9gkUQepnHOZG7M83cV/FFqhRADq7X7PITxLg4JwtYX8Yw9N8ZivtSz9f1K3117QXOtSn4MTHtKkNBE="
          /&gt;
      &lt;/div&gt;
      &lt;div id="signupPersonal"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelName"&gt;Name:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxName" type="text" maxlength="50"
                      id="TextBoxName" name="firstname" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelSurname"&gt;Surname:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxSurname" type="text" maxlength="50"
                      id="TextBoxSurname" class="required" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelPin"&gt;Preferred Pin:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxPin" type="password" maxlength="10"
                      id="TextBoxPin" class="required" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelConfirmPin"&gt;Confirm Pin:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxConfirmPin" type="password"
                      maxlength="10" id="TextBoxConfirmPin" class="required" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelPhoneNo"&gt;Home Number:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxPhoneNo" type="text" maxlength="20"
                      id="TextBoxPhoneNo" class="required digits" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelMobileNo"&gt;Cell Number:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxMobileNo" type="text" maxlength="20"
                      id="TextBoxMobileNo" class="required digits" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelIDNumber"&gt;ID Number:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxIDNumber" type="text" maxlength="20"
                      id="TextBoxIDNumber" class="required digits" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelEmail"&gt;Email Address (to be used as username):&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxEmail" maxlength="50" id="TextBoxEmail"
                      name="email" type="email" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_Label1"&gt;Postal Address:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;textarea name="ctl00$ContentPlaceHolder1$TextBoxPostal" rows="4" cols="20"
                      id="TextBoxPostal"&gt;&lt;/textarea&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelPassword"&gt;Password:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxPassword" maxlength="50"
                      id="TextBoxPassword" name="password" type="password" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelConfirmPassword"&gt;Confirm Password:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;input name="ctl00$ContentPlaceHolder1$TextBoxConfirmPassword" maxlength="50"
                      id="TextBoxConfirmPassword" name="confirm_password" type="password" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="tdRight"&gt;&lt;span id="ctl00_ContentPlaceHolder1_LabelContactMethod"&gt;Preferred method of contact:&lt;/span&gt;
  
                  &lt;/td&gt;
                  &lt;td class="tdLeft"&gt;
                      &lt;select name="ctl00$ContentPlaceHolder1$DropDownListContactMethod" id="DropDownListContactMethod"&gt;
                          &lt;option value="0"&gt;Email&lt;/option&gt;
                          &lt;option value="1"&gt;Notification via Mobile Text Messages&lt;/option&gt;
                          &lt;option value="2"&gt;Both&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;input type="submit" name="ctl00$ContentPlaceHolder1$ButtonRegister" value="Register"
                      id="ctl00_ContentPlaceHolder1_ButtonRegister" class="register" class="submit"
                      type="submit" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>