页面刷新ajax验证后form（）函数未定义

Question

在多步表单中集成 jQuery 验证。问题是在加载表单后，如果我重新加载页面，我会收到错误 Cannot read property '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() 函数。