title: How do I successfully apply jquery validation rules to a jQuery autocomplete "input" field?
body: <p>How do I successfully apply jquery validation rules to a jQuery autocomplete "input" field?</p>
  
  <p>To further explain, in the example, below:  </p>
  
  <ol>
  <li><p>jquery validation works as expected for the "<strong><em>state</em></strong>" input field - i.e., it produces a validation message upon form submittal.</p></li>
  <li><p>jquery validation does NOT work for "<strong><em>acstate</em></strong>" input field - i.e., it DOES NOT produce a validation message upon form submittal.</p></li>
  </ol>
  
  <p>Thanks for any help/guidance you can provide!</p>
  
  <hr>
  
  <h1>FWIW - Here is the example I'm using:</h1>
  
  <pre><code>    &lt;link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" /&gt;
      &lt;script src="js/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;     
      &lt;script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;         
  
      &lt;script type="text/javascript"&gt;
          /* &lt;![CDATA[ */
  
          $(document).ready(function() {
  
              $("#form1").validate({
                  rules: {
                      state: {
                          required: true,
                          minlength: 2
                      },
                      acstate: {
                          required: true,
                          minlength: 2                            
                      }
                  },
                  messages: {
                      state: {
                          required: "state required",
                          minlength: "min length {0}"
                      },
                      acstate: {
                          required: "acstate required",
                          minlength: "min length {0}"                            
                      }
                  }
              });
  
              $("#acstate").autocomplete(
              {
                  source: "AZ,CA,DC,MD,NM,NV,VA".split(",")                     
              });
  
              $("#submit").click(function() {
                  if ($("#form1").valid())
                  {
                      alert("VALID");
                  }
                  else
                  {
                      alert("INVALID");
                  }
              });
          });
  </code></pre>
  
  <h1>If you need to see the entire HTML...</h1>
  
  <pre><code>    &lt;?xml version='1.0' encoding='UTF-8' ?&gt;
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
          &lt;head&gt;
              &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
              &lt;title&gt;acvalid&lt;/title&gt;
  
              &lt;link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" /&gt;
              &lt;script src="js/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;     
              &lt;script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="js/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;         
  
              &lt;script type="text/javascript"&gt;
                  /* &lt;![CDATA[ */
  
                  $(document).ready(function() {
  
                      $("#form1").validate({
                          rules: {
                              state: {
                                  required: true,
                                  minlength: 2
                              },
                              acstate: {
                                  required: true,
                                  minlength: 2                            
                              }
                          },
                          messages: {
                              state: {
                                  required: "state required",
                                  minlength: "min length {0}"
                              },
                              acstate: {
                                  required: "acstate required",
                                  minlength: "min length {0}"                            
                              }
                          }
                      });
  
                      //statelistdata = "AZ,CA,DC,MD,NM,NV,VA";
  
                      $("#acstate").autocomplete(
                      {
                          source: "AZ,CA,DC,MD,NM,NV,VA".split(",")                     
                      });
  
                      $("#submit").click(function() {
                          if ($("#form1").valid())
                          {
                              alert("VALID");
                          }
                          else
                          {
                              alert("INVALID");
                          }
                      });
                  });
  
                  /* ]]&gt; */
              &lt;/script&gt;
  
          &lt;/head&gt;
          &lt;body&gt;
              &lt;form id="form1"&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;label for="state" &gt;regular state input:&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input id="state" class="required" minlength="2" maxlength="2"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;label for="acstate" &gt;'autocomplete' state input:&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input id="acstate" class="required" minlength="2" maxlength="2"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;input type="submit" id="submit" value="Submit" /&gt;                            
              &lt;/form&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>