0

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.

11
  • refer this if that's relevant to you stackoverflow.com/questions/14896205/… – Mohit Rane Jul 25 '19 at 11:33
  • I have referred the link, It is not relevant to my issue. – Amy Jul 25 '19 at 11:37
  • can please post your html code too? – Mohit Rane Jul 25 '19 at 11:40
  • I have edited my question, please have a look. – Amy Jul 25 '19 at 11:47
  • i can't see your firstname and lastname filed in phtml? – Mohit Rane Jul 25 '19 at 11:55
0

try below code for form validation

jQuery('#form_id').validation().validate;
var isValidated = jQuery('#form_id').validation('isValid');
if(isValidated) {
    //do your code here
}

I hope it will help...!!!

8
  • @amy : just replace you scirpt tag with below code and observe browser console: <script type="text/javascript"> require([ 'jquery', 'jquery/validate' ], function(jQuery) { jQuery(document).ready(function() { $('#validate-form').validation().validate; var isValidated = $('#validate-form').validation('isValid'); if(isValidated) { //do your code here console.log('Your form is valid now'); } else { console.log('Your form is not valid yet'); } }); }); </script> – Balwant Singh Jul 25 '19 at 12:58
  • I have tried this method only, Now showing this error message TypeError: $ is not a function and SyntaxError: expected expression, got ',' – Amy Jul 25 '19 at 13:09
  • @Amy: in your case replace $ with jQuery – Balwant Singh Jul 25 '19 at 13:10
  • @Amy: try this <script type="text/javascript"> require([ 'jquery', 'jquery/validate' ], function(jQuery) { jQuery(document).ready(function() { jQuery('#validate-form').validation().validate; var isValidated = jQuery('#validate-form').validation('isValid'); if(isValidated) { //do your code here console.log('Your form is valid now'); } else { console.log('Your form is not valid yet'); } }); }); </script> – Balwant Singh Jul 25 '19 at 13:12
  • I have already replaced with jQuery and it is showing SyntaxError: expected expression, got ',' – Amy Jul 25 '19 at 13:14

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.