I am getting the below error after applying the validation in my form:
Magento2: TypeError: $ .validator.methods[method] is undefined
Here is my validation code:
I have extended the customer address edit form, want to stop the default validation and added my custom validation.
<?php /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile /** @var \Magento\Customer\Block\Address\Edit $ block */ // 18id="form-validate" ?> <?php $ _company = $ block->getLayout()->createBlock('Magento\Customer\Block\Widget\Company') ?> <?php $ _telephone = $ block->getLayout()->createBlock('Magento\Customer\Block\Widget\Telephone') ?> <?php $ _fax = $ block->getLayout()->createBlock('Magento\Customer\Block\Widget\Fax') ?> <form class="form-address-edit" action="<?= $ block->escapeUrl($ block->getSaveUrl()) ?>" id="validate-form" method="post" enctype="multipart/form-data"> <fieldset class="fieldset samefield_affecting"> <legend class="legend block-title"><span><?= $ block->escapeHtml(__('Contact Information')) ?></span></legend><br> <?= $ block->getBlockHtml('formkey') ?> <input type="hidden" name="success_url" value="<?= $ block->escapeUrl($ block->getSuccessUrl()) ?>"> <input type="hidden" name="error_url" value="<?= $ block->escapeUrl($ block->getErrorUrl()) ?>"> <?= $ block->getNameBlockHtml() ?> <?php if ($ _company->isEnabled()): ?> <?= $ _company->setCompany($ block->getAddress()->getCompany())->toHtml() ?> <?php endif ?> <?php if ($ _telephone->isEnabled()): ?> <?= $ _telephone->setTelephone($ block->getAddress()->getTelephone())->toHtml() ?> <?php endif ?> <?php if ($ _fax->isEnabled()): ?> <?= $ _fax->setFax($ block->getAddress()->getFax())->toHtml() ?> <?php endif ?> </fieldset> <fieldset class="fieldset"> <legend class="legend block-title"><span><?= $ block->escapeHtml(__('Address')) ?></span></legend><br> <?php $ _streetValidationClass = $ this->helper('Magento\Customer\Helper\Address')->getAttributeValidationClass('street'); ?> <div class="field street"> <label for="street_1" class="label"> <span><?= $ block->escapeHtml(__('Street Address')) ?></span> </label> <div class="control"> <input type="text" name="street[]" value="<?= $ block->escapeHtmlAttr($ block->getStreetLine(1)) ?>" title="<?= $ block->escapeHtmlAttr(__('Street Address')) ?>" id="street_1" class="input-design input-text <?= $ block->escapeHtmlAttr($ _streetValidationClass) ?>"/> <div class="nested"> <?php $ _streetValidationClass = trim(str_replace('required-entry', '', $ _streetValidationClass)); ?> <?php for ($ _i = 1, $ _n = $ this->helper('Magento\Customer\Helper\Address')->getStreetLines(); $ _i < $ _n; $ _i++): ?> <div class="field additional"> <label class="label" for="street_<?= /* @noEscape */ $ _i + 1 ?>"> <span><?= $ block->escapeHtml(__('Street Address %1', $ _i + 1)) ?></span> </label> <div class="control"> <input type="text" name="street[]" value="<?= $ block->escapeHtmlAttr($ block->getStreetLine($ _i + 1)) ?>" title="<?= $ block->escapeHtmlAttr(__('Street Address %1', $ _i + 1)) ?>" id="street_<?= /* @noEscape */ $ _i + 1 ?>" class="input-design input-text"> </div> </div> <?php endfor; ?> </div> </div> </div> <?php if ($ this->helper('Magento\Customer\Helper\Address')->isVatAttributeVisible()) : ?> <div class="field taxvat"> <label class="label" for="vat_id"> <span><?= $ block->escapeHtml(__('VAT Number')) ?></span> </label> <div class="control"> <input type="text" name="vat_id" value="<?= $ block->escapeHtmlAttr($ block->getAddress()->getVatId()) ?>" title="<?= $ block->escapeHtmlAttr(__('VAT Number')) ?>" class="input-design input-text" id="vat_id"> </div> </div> <?php endif; ?> <div class="field city"> <label class="label" for="city"><span><?= $ block->escapeHtml(__('City')) ?></span></label> <div class="control"> <input type="text" name="city" value="<?= $ block->escapeHtmlAttr($ block->getAddress()->getCity()) ?>" title="<?= $ block->escapeHtmlAttr(__('City')) ?>" class="input-design input-text" id="city"> </div> </div> <div class="field region"> <label class="label" for="region_id"> <span><?= $ block->escapeHtml(__('State/Province')) ?></span> </label> <div class="control"> <select id="region_id" name="region_id" title="<?= $ block->escapeHtmlAttr(__('State/Province')) ?>" class="select_img validate-select" <?= /* @noEscape */ !$ block->getConfig('general/region/display_all') ? ' disabled="disabled"' : '' ?>> <option value=""><?= $ block->escapeHtml(__('Please select a region, state or province.')) ?></option> </select> <input type="text" id="region" name="region" value="<?= $ block->escapeHtmlAttr($ block->getRegion()) ?>" title="<?= $ block->escapeHtmlAttr(__('State/Province')) ?>" class="input-design input-text "<?= !$ block->getConfig('general/region/display_all') ? ' disabled="disabled"' : '' ?>/> </div> </div> <div class="field zip"> <label class="label" for="zip"> <span><?= $ block->escapeHtml(__('Zip/Postal Code')) ?></span> </label> <div class="control"> <input type="text" name="postcode" value="<?= $ block->escapeHtmlAttr($ block->getAddress()->getPostcode()) ?>" title="<?= $ block->escapeHtmlAttr(__('Zip/Postal Code')) ?>" id="zip" class="input-design input-text"> </div> </div> <div class="field country"> <label class="label" for="country"><span><?= $ block->escapeHtml(__('Country')) ?></span></label> <div class="control"> <?= $ block->getCountryHtmlSelect() ?> </div> </div> <?php if ($ block->isDefaultBilling()): ?> <div class="message info"> <span><?= $ block->escapeHtml(__("It's a default billing address.")) ?></span> </div> <?php elseif ($ block->canSetAsDefaultBilling()): ?> <div class="field choice set billing"> <label class="submit_head phone_rig yes" for="primary_billing"> <input class="input-design" type="checkbox" id="primary_billing" name="default_billing" value="1" class="checkbox"><?= $ block->escapeHtml(__('Use as my default billing address')) ?> <span class="submit_class"></span> </label> </div> <?php else: ?> <input type="hidden" name="default_billing" value="1" /> <?php endif; ?> <?php if ($ block->isDefaultShipping()): ?> <div class="message info"> <span><?= $ block->escapeHtml(__("It's a default shipping address.")) ?></span> </div> <?php elseif ($ block->canSetAsDefaultShipping()): ?> <div class="field choice set shipping"> <label class="submit_head phone_rig yes" for="primary_shipping"> <input class="input-design" type="checkbox" name="default_shipping" id="primary_shipping" checked="checked" value="1"><?= $ block->escapeHtml(__('Use as my default shipping address')) ?> <span class="submit_class"></span> </label> </div> <?php else: ?> <input type="hidden" name="default_shipping" value="1"> <?php endif; ?> </fieldset> <div class="actions-toolbar"> <div class="primary save_add"> <button type="submit" class="action submit primary save_width" data-action="save-address" title="<?= $ block->escapeHtmlAttr(__('Save Address')) ?>"> <?= $ block->escapeHtml(__('Save Address')) ?> </button> </div> <div class="secondary"> <a class="action back" href="<?= $ block->escapeUrl($ block->getBackUrl()) ?>"> <span><?= $ block->escapeHtml(__('Go back')) ?></span> </a> </div> </div> </form> <style type="text/css"> .fieldset>.field.required>.label:after, .fieldset>.fields>.field.required>.label:after, .fieldset>.field._required>.label:after, .fieldset>.fields>.field._required>.label:after { font-size: 18px !important; margin: 0px !important; padding: 0px 3px 0px 3px !important; top: 5px !important; position: relative; } .fieldset>.field .additional, .fieldset>.fields>.field .additional { margin-top: 20px; } div.mage-error[generated] { color: #ff0000; font-size: 14px; position: absolute; margin-top: 0px !important; font-weight: 700; } @media(max-width: 767px) { .actions-toolbar,legend.legend.block-title { margin: 20px 0; } } #country option:nth-child(3){ display: none; } </style> <script type="text/javascript"> require([ 'jquery', 'jquery/validate' ], function(jQuery) { jQuery(document).ready(function() { alert("Amy11"); jQuery("#validate-form").validate( { rules: { firstname: { required:true }, lastname: { required:true }, telephone: { required:true }, "street[]": { required:true }, country_id: { required:true }, city: { required:true }, postcode: { required:true }, }, messages: { firstname: "Please enter your First Name", lastname: "Please enter your Last Name", telephone: "Please enter your Phone Number", "street[]": "Please enter your Street", country_id: "Please enter your Country", city: "Please enter your City", postcode: "Please enter your Zip/Postal Code", }, submitHandler: function(form, event) { event.preventDefault(); //console.log("aaaaaaaaaaa"); form.submit(); } }); }); }); </script> Any help would be appreciated.
