JQueryValidate & JqueryMobile validation error appears on open popup

Question

I have a bit of a strange problem. I'm creating a small webapp using JqueryMobile 1.4 and JqueryValidate http://jqueryvalidation.org/ 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

 //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 > 9 &&
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()); // <- 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

Here is the code for the popup:

            <!-- NEW PHONE OR EMAIL POPUP --> 
            <div data-role='popup' id='PopUpAddNumber' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width:300px;'>
                <div data-role='header' data-theme='a'>
                    <h1>Add Number</h1>
                </div>
                <div data-role='main' class='ui-content'>
                    <form id='addNumber' onsubmit="return false;">

                    <input type="hidden" name="cust_id" id="custident" value='<?php echo $custid; ?>' /> 
                    <input type="hidden" name="sess_id" value='<?php echo $sid; ?>' />

                        <div class="ui-field-contain">
                        <label for="phoneType">Type</label>
                            <select name="phoneType" id="phoneType">
                                <?php echo $phoneInnerOptions; ?>
                            </select>
                        </div>
                        <div class="ui-field-contain">
                            <label for="phoneNumber">Number</label>
                            <input type="text" name="phoneNumber" id="phoneNumber" value="">
                        </div> 
                        <div class="ui-field-contain">
                            <label for="primaryNo">Primary Contact</label>
                            <select name="primaryNo" id="primaryNo">
                                <option value="none" id="none" selected></option>
                                <option value="phone" id="phone" >Primary Phone</option>
                                <option value="email" id="email">Primary Email</option>

                            </select>
                        </div> 
                        <div class='ui-grid-a'>
                            <div class='ui-block-a'>
                                <input type='submit' id="submitNum" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' />
                            </div>
                            <div class='ui-block-b'>
                                <a href='#' class='ui-btn' data-rel='back' data-transition='pop' id="addNumberReset">Cancel</a>
                            </div>
                            <div id="success" style="color: black;"></div>
                        </div>
                    </form>
                </div>
            </div>   <!-- /POPUP -->

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?

Please see JS Fiddle here: http://jsfiddle.net/6G52Y/

Thanks :)

Answer 1

You would need to use an event handler for the reset button. That event would need to clear the same div used as the error placement for the jQuery validation plugin.You may also be able to use this method: http://jqueryvalidation.org/Validator.resetForm.

Ex:

var validator = $( "#myform" ).validate();
validator.resetForm();