title: JQueryValidate & JqueryMobile validation error appears on open popup
body: <p>I have a bit of a strange problem. I'm creating a small webapp using JqueryMobile 1.4 and JqueryValidate <a href="http://jqueryvalidation.org/" rel="nofollow">http://jqueryvalidation.org/</a> for my form validation. I have a popup that is opened and the user can enter some data and on submit it uses $.post to post the data to the DB. Here is the jquery</p>
  
  <pre><code> //Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to    exclude many premium numbers
  jQuery.validator.addMethod('phonesUK', function(phone_number, element) {
  phone_number = phone_number.replace(/\(|\)|\s+|-/g,'');
  return this.optional(element) || phone_number.length &gt; 9 &amp;&amp;
  phone_number.match(/^(?:(?:(?:00\s?|\+)44\s?|0)(?:1\d{8,9}|[23]\d{9}|7(?:[45789]\d{8}|624\d{6})))$/);
  });
  
  jQuery.validator.addMethod("phoneOrEmail", function(value, element) {
  return this.optional(element) ||
  ($.validator.methods["phonesUK"].call(this, value, element)) ||
  ($.validator.methods["email"].call(this, value, element));
  }, "Please enter a valid phone number or email address");
  
                  $().ready(function() {      
                      // validate new number form
                      $("#addNumber").validate({
                          errorPlacement: function(error, element) {
                              error.insertAfter(element.parent()); // &lt;- make sure the error message appears after parent element (after textbox!)
                          },
                          rules: {
  
                              phoneNumber: 
                                  {
                                      phoneOrEmail: true,
                                      required: true,
                                  }
  
                          },
                          messages: {
                              phoneNumber: "Please enter a valid number or email",
                          },
  
                          submitHandler: function(form) {
                              $('#PopUpAddNumber').popup('close');
                              $.post("customer_AddNewNumber.php", $("#addNumber").serialize(),  function(response)
                              {
                                   LoadCustomerNumber();
                              });
                              $('#addNumber')[0].reset(); //on close reset form
                          }
                      }); //end validate
                  }); // end function
  </code></pre>
  
  <p>Here is the code for the popup:</p>
  
  <pre><code>            &lt;!-- NEW PHONE OR EMAIL POPUP --&gt; 
              &lt;div data-role='popup' id='PopUpAddNumber' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width:300px;'&gt;
                  &lt;div data-role='header' data-theme='a'&gt;
                      &lt;h1&gt;Add Number&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div data-role='main' class='ui-content'&gt;
                      &lt;form id='addNumber' onsubmit="return false;"&gt;
  
                      &lt;input type="hidden" name="cust_id" id="custident" value='&lt;?php echo $custid; ?&gt;' /&gt; 
                      &lt;input type="hidden" name="sess_id" value='&lt;?php echo $sid; ?&gt;' /&gt;
  
                          &lt;div class="ui-field-contain"&gt;
                          &lt;label for="phoneType"&gt;Type&lt;/label&gt;
                              &lt;select name="phoneType" id="phoneType"&gt;
                                  &lt;?php echo $phoneInnerOptions; ?&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                          &lt;div class="ui-field-contain"&gt;
                              &lt;label for="phoneNumber"&gt;Number&lt;/label&gt;
                              &lt;input type="text" name="phoneNumber" id="phoneNumber" value=""&gt;
                          &lt;/div&gt; 
                          &lt;div class="ui-field-contain"&gt;
                              &lt;label for="primaryNo"&gt;Primary Contact&lt;/label&gt;
                              &lt;select name="primaryNo" id="primaryNo"&gt;
                                  &lt;option value="none" id="none" selected&gt;&lt;/option&gt;
                                  &lt;option value="phone" id="phone" &gt;Primary Phone&lt;/option&gt;
                                  &lt;option value="email" id="email"&gt;Primary Email&lt;/option&gt;
  
                              &lt;/select&gt;
                          &lt;/div&gt; 
                          &lt;div class='ui-grid-a'&gt;
                              &lt;div class='ui-block-a'&gt;
                                  &lt;input type='submit' id="submitNum" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' /&gt;
                              &lt;/div&gt;
                              &lt;div class='ui-block-b'&gt;
                                  &lt;a href='#' class='ui-btn' data-rel='back' data-transition='pop' id="addNumberReset"&gt;Cancel&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div id="success" style="color: black;"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;   &lt;!-- /POPUP --&gt;
  </code></pre>
  
  <p>This is working well, however, if I enter invalid data and press submit the error appears as expected. If I then cancel I expect ALL of my form data to be erased. But if I then re-open the popup the form is clear BUT the error message is still present!
  Can any of you think of a way round this?</p>
  
  <p>Please see JS Fiddle here: <a href="http://jsfiddle.net/6G52Y/" rel="nofollow">http://jsfiddle.net/6G52Y/</a></p>
  
  <p>Thanks :)</p>