1

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.

0

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>
  • Now it is showing TypeError: jQuery is not a function. – Amy May 3 at 8:13
  • can you try updated answer – fmsthird May 3 at 8:32
  • I am getting the same error.. – Amy May 3 at 9:51
  • did you run upgrade and redeploy static files? – fmsthird May 3 at 9:52
  • 1
    Thank you soo much its working perfectly fine.. – Amy May 3 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.