[FIXED] form() function undefined after page refresh ajax validation

Issue

Integrated jQuery validation in the multistep form. The problem is after the form is loaded, then if I reload the page I am getting the error Cannot read property 'form' of undefined.

Tried some method, but didn't get the solution, 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 is from continue button from form.

Version using https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Note: It's a multistep form, so I am not submitting the form until reach the final submit. WordPress website

Solution

I guess your undefined error is coming from v.form() in the formContinue() function, so I guess the validation code isn't being run when the page is reloaded.

Move the code currently in the document.ready() function to it's own function (e.g. prepValidation()). Call the prepValidation() function from document.ready(). In the formContinue() function check if "v" has been defined or not and if not then call the prepValidation() function before calling v.form().

Answered By - AaronJ