页面刷新 ajax 验证后 form() 函数未定义

Question

在多步表单中集成 jQuery 验证。问题是在加载表单后，如果我重新加载页面，我会收到错误 Cannot read 属性 'form' of undefined.

尝试了一些方法，但没有得到解决方案，JQuery Validation Not working after page refresh (Jquery Mobile)。

let  v;
jQuery(document).ready(function (jQuery) {
    
    jQuery.validator.addMethod('username', function(value, element, param) {
        var nameRegex = /^[a-zA-Z0-9]+$/;
        return value.match(nameRegex);
    }, 'Only a-z, A-Z, 0-9 characters are allowed');

    v = jQuery("#privateFormHousehold").validate({
        rules: {
        firstName: {
            required: true,
            username : true,
        },
        surname: {
            required: true,
            username : true,
        },
        dob: {
            required: true,
        },
        },
        errorElement: "span",
        errorClass: "help-inline",
    });
});



function formContinue(){
    if (v.form()) {
        .....
    }
}

    <form action="javascript:void(0)" method="post" id="privateFormHousehold" name="privateFormHousehold">
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-policy-holder" role="tabpanel" aria-labelledby="pills-policy-holder-tab">
            <div class="main_content">
                <div class="right_content popup_scroll pt-10">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12 col-xl-12  mb-20 sm:mb-40">
                                <div class="form-group bz_inputs floating_label with_border_input">
                                    <label class="input_label label_left font-secondary">First Name</label>
                                    <input type="text" id="firstName" name="firstName" class="form-control floatInput bordered_input">
                                </div>
                            </div>
                            <div class="col-sm-12 mb-20 sm:mb-40">
                                <div class="form-group bz_inputs floating_label with_border_input">
                                    <label class="input_label label_left font-secondary">Last Name</label>
                                    <input type="text" id="lastName" name="lastName" class="form-control floatInput bordered_input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal_footer flex flex-wrap justify-between items-center">
                        <div class="mt-10">
                            <button  type="button" onclick="formContinueHousehold(1,'h1','h2');" class="btn">Continue</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-personal-insurance" role="tabpanel" aria-labelledby="pills-personal-insurance-tab">
            <div class="main_content">
                <div class="right_content popup_scroll pt-10">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12 col-xl-6 mb-20 sm:mb-40">
                                <div class="form-group bz_inputs floating_label with_border_input">
                                    <label class="input_label label_left font-secondary">Phone</label>
                                    <input type="text" id="phone" name="phone" class="form-control floatInput bordered_input">
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6 mb-20 sm:mb-40">
                                <div class="form-group bz_inputs floating_label with_border_input">
                                    <label class="input_label label_left font-secondary">E-mail</label>
                                    <input type="email" id="email" name="email" class="form-control floatInput bordered_input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal_footer flex flex-wrap justify-between items-center">
                        <div class="mt-10">
                            <button type="button" onclick="formBackClick('f1','f2')" class="btn">BACK</button>
                            <button type="button" onclick="formContinueHousehold(2,'f2','f3');" class="btn">Continue</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-security" role="tabpanel" aria-labelledby="pills-security-tab">
            <div class="main_content">
                <div class="security_tab" id="security-tab">
                    <div class="modal_footer flex flex-wrap justify-between items-center">
                        <div class="flex items-center flex-wrap">
                            <button type="button" onclick="formCancelClick('privateFormHousehold')" data-bs-dismiss="modal" class="btn">Cancel</button>
                            <button type="button" onclick="formInsuranceSubmit('form1','form1', 'form1-submit', 'form1-response')" id="form1-submit" class="btn">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

formContinue 来自表单的继续按钮。

版本使用 https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

注意：这是一个多步骤表单，所以我要等到最后提交时才提交表单。 WordPress 网站

Answer 1

我猜你的未定义错误来自 formContinue() 函数中的 v.form()，所以我猜当页面重新加载时验证码不是运行。

将当前在 document.ready() 函数中的代码移动到它自己的函数中（例如 prepValidation()）。从 document.ready() 调用 prepValidation() 函数。在 formContinue() 函数中检查“v”是否已定义，如果没有，则在调用 v.form().

之前调用 prepValidation() 函数

页面刷新 ajax 验证后 form() 函数未定义

form() function undefined after page refresh ajax validation

javascript

wordpress

jquery

jquery-validate