TypeError: t.validator.methods[a] is undefined issue in jquery validation in magento2

Question

I am facing this issue TypeError: t.validator.methods[a] is undefined after adding jquery validation in my form.

Here is my validation code:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
require([
    'jquery'
], function($)
{ 
    jQuery(document).ready(function()
    {
        jQuery("#form-validate").validate(
        {
            rules: 
            {
                email: 
                {
                    required: true,
                    email: true
                }, 
                password : 
                {
                    required: true,
                    passwordCheck: true
                },  
                password_confirmation: 
                {
                    required: true,
                    equalTo : "#password"
                },
                firstname: "required",
                lastname: "required",
                zip_code: 
                {
                    required: true,
                    maxlength:8,
                },
            },
            messages: 
            {
                email: "Please enter a valid Email Address",
                password: 
                {
                    required: "Please enter your Password",
                    passwordCheck: "Use at least one lowercase letter, one capital letter, and one number with atleast 6 characters",
                },
                password_confirmation: 
                {
                    required: "Please enter you Password Confirmation",
                    equalTo: "Your Password and Confirm Password does not match",
                },
                firstname: "Please enter your First Name",
                lastname: "Please enter your Last Name",
                zip_code: 
                {
                    required: "Please enter your Zipcode",
                },
            },
            submitHandler: function(form, event) 
            { 
                event.preventDefault();
                form.submit();
             }
        });

         jQuery.validator.addMethod("passwordCheck", function(value) 
         {
         var regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{6,}$/;
        //    // return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) // consists of only these
        //    //     && /[a-z]/.test(value) // has a lowercase letter
        //    //     && /\d/.test(value) // has a digit
        //    //console.log('pass: ' + regex.test(value))
            return regex.test(value);
         });
    });

});

</script>

My input field:

<div class="field password">
            <label for="password" class="label"><span><?= $block->escapeHtml(__('Choose a Password')) ?></span></label>
            <div class="control">
                <input style="color: #000 !important;" type="password"  name="password" id="password"
                       title="<?= $block->escapeHtmlAttr(__('Password')) ?>"
                       class="input-text input-design" autocomplete="off" passwordCheck="passwordCheck">
                <div id="password-strength-meter-container" data-role="password-strength-meter" aria-live="polite">
                    <div id="password-strength-meter" class="password-strength-meter">

                    <label class="input_belowline"> 
                    Your password must contain six or more characters, with at least one lowercase letter, one capital letter, and one number.</label>
                        <!-- <?= $block->escapeHtml(__('Password Strength')) ?>:
                        <span id="password-strength-meter-label" data-role="password-strength-meter-label">
                            <?= $block->escapeHtml(__('No Password')) ?> -->
                    </div>
                </div>
            </div>

        </div>

I don't know where I am making mistake.

Any help would be appreciated.

Answer 1

You can define jQuery in your require function

<script type="text/javascript">
    require([
        'jquery',
        'jquery/validate'
    ], function(jQuery){
        jQuery(document).ready(function()
        {
            jQuery("#form-validate").validate(
                {
                    rules:
                        {
                            email:
                                {
                                    required: true,
                                    email: true
                                },
                            password :
                                {
                                    required: true,
                                    passwordCheck: true
                                },
                            password_confirmation:
                                {
                                    required: true,
                                    equalTo : "#password"
                                },
                            firstname: "required",
                            lastname: "required",
                            zip_code:
                                {
                                    required: true,
                                    maxlength:8,
                                },
                        },
                    messages:
                        {
                            email: "Please enter a valid Email Address",
                            password:
                                {
                                    required: "Please enter your Password",
                                    passwordCheck: "Use at least one lowercase letter, one capital letter, and one number with atleast 6 characters",
                                },
                            password_confirmation:
                                {
                                    required: "Please enter you Password Confirmation",
                                    equalTo: "Your Password and Confirm Password does not match",
                                },
                            firstname: "Please enter your First Name",
                            lastname: "Please enter your Last Name",
                            zip_code:
                                {
                                    required: "Please enter your Zipcode",
                                },
                        },
                    submitHandler: function(form, event)
                    {
                        event.preventDefault();
                        form.submit();
                    }
                });

            jQuery.validator.addMethod("passwordCheck", function(value)
            {
                var regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{6,}$/;
                //    // return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) // consists of only these
                //    //     && /[a-z]/.test(value) // has a lowercase letter
                //    //     && /\d/.test(value) // has a digit
                //    //console.log('pass: ' + regex.test(value))
                return regex.test(value);
            });
        });

    });

</script>