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 :)

Raymond Camden · Accepted Answer · 2014-03-26 11:56:22Z

2

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();

edited Mar 26, 2014 at 11:56

answered Mar 26, 2014 at 10:38

Raymond Camden

10.9k3 gold badges36 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Omar Over a year ago

Adding simple code is better in case the link get broken in the future.

Raymond Camden Over a year ago

Sigh, I hate that aspect of SO. ;)

Omar Over a year ago

do you hate it now? ;)

Janey Over a year ago

Hello I tried that and it didn't make any difference.. did this: submitHandler: function(form) { $('#PopUpAddNumber').popup('close'); $.post("customer_AddNewNumber.php", $("#addNumber").serialize(), function(response) { LoadCustomerNumber(); }); //$('#addNumber')[0].reset(); //on close reset form } }); //end validate var validator = $( "#addNumber" ).validate(); validator.resetForm(); }); // end function am I doing this wrong or do you have any other ideas?

Omar Over a year ago

@Janey it's working. Wrap all your code in pagecreate not .ready() jsfiddle.net/Palestinian/6G52Y/2

|

Collectives™ on Stack Overflow

JQueryValidate & JqueryMobile validation error appears on open popup

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related