Question

我有点奇怪的问题。我正在使用JqueryMobile 1.4和JqueryValidate http://jqueryvalidation.org/创建一个小型webapp来进行表单验证。我有一个打开的弹出窗口，用户可以输入一些数据，在提交时，它使用$ .post将数据发布到数据库。这是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

以下是弹出窗口的代码：

            <!-- 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 -->

这很有效，但是，如果我输入无效数据并按提交，则错误会按预期显示。如果我取消，我希望我的所有表格数据都被删除。但是，如果我然后重新打开弹出窗口，表单是明确的但错误信息仍然存在！你们有没有想过这个方法呢？

请在此处查看JS Fiddle：http://jsfiddle.net/6G52Y/

谢谢：）

Answer 1

您需要为重置按钮使用事件处理程序。该事件需要清除用作jQuery验证插件的错误放置的相同div。您也可以使用此方法：http://jqueryvalidation.org/Validator.resetForm。

例如：

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

JQuery验证和;打开弹出窗口时出现Jquery Mobile验证错误

1 个答案: