How to add custom validation for Street 1 in Checkout page > Add shipping address in Magento 2.2.8?

by Aditya Shah   Last Updated October 10, 2019 11:09 AM

How to add custom validation for Street 1 in Checkout page > Add shipping address in Magento 2.2.8 ?

enter image description here

I want to apply custom validation on Street 1 field and I have tried below things.

Method 1

I have added JS with requireJS

  1. app/design/frontend/Vendor/theme-name/Magento_Checkout/web/js/myfile.js

    My js validator method goes here

    define([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
    ], function($){
        'use strict';
        return function() {
            $.validator.addMethod(
                "validate-po-box",
                function(value, element) {
                    //Perform your operation here and return the result true/false.
                    return !/[P|p]*(OST|ost)*\.*\s*[O|o|0]*(ffice|FFICE)*\.*\s*[B|b][O|o|0][X|x]/.test(value);
                },
                $.mage.__("PO BOX validation error message.")
            );
    }
    

    });

  2. app/design/frontend/Vendor/theme-name/requirejs-config.js

    var config = {
        map: {
            '*': {
                checkoutjs: 'Magento_Checkout/js/myfile'
            }
        }
    
    };
    
  3. app/design/frontend/Vendor/theme-name/Magento_Checkout/templates/onepage.phtml

Here I called js !

<script type="text/x-magento-init">
   {
       "*": {
           "checkoutjs": {}
       }
   }
</script>

METHOD 1 is working with Normal JavaScript but It is not working with $.validator.addMethod


Method 2

I have added JS with mixins and added Layout processor plugin

  1. app/design/frontend/Vendor/theme-name/web/js/validation-mixin.js

    My validation-mixin.js validator method goes here

    define([ 'jquery' ], function ($) { "use strict";

    return function () {
        $.validator.addMethod(
            console.log("Validation of POBOX");
            'validate-po-box',
            function (value) {
                // PO BOX custom validation stuff here
                return !/[P|p]*(OST|ost)*\.*\s*[O|o|0]*(ffice|FFICE)*\.*\s*[B|b][O|o|0][X|x]/.test(value);
            },
            $.mage.__('PO BOX validation error message')
        );
    }
    

    });

  2. app/design/frontend/Vendor/theme-name/web/js/requirejs-config.js

Here is requirejs-config.js file.

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {
        }
    },
    mixins: {
            'mage/validation': {
                'js/validation-mixin': true
            }
    }
};
  1. app/code/Vendor/module/Model/Checkout/LayoutProcessorPlugin.php

Here I called LayoutProcessor Plugin !

<?php

namespace UNFI\AdvancedCheckout\Model\Checkout;

class LayoutProcessorPlugin
{
/**
 * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
 * @param array $jsLayout
 * @return array
 */

public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
    array  $jsLayout
) {

    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
        'component' => 'Magento_Ui/js/form/components/group',
        'label' => __('Company Name Line 1/ Street Address Line 2'),
        'required' => true,
        'dataScope' => 'shippingAddress.street',
        'provider' => 'checkoutProvider',
        'sortOrder' => 60,
        'type' => 'group',
        'additionalClasses' => 'street',
        'children' => [
                [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/input'
                ],
                'dataScope' => '0',
                'provider' => 'checkoutProvider',
                //'additionalClasses' => 'validate-po-box',
                'validation' => ['required-entry' => true, "min_text_len‌​gth" => 3, "max_text_length" => 30, "validate-po-box" => true ],
            ]
        ]
    ];
    return $jsLayout;
    }
}

METHOD 2 is not working as-well.


Method 3

I tried to override lib/web/mage/validation.js in Magento 2.2.8 ?

I have tried this way but it's not working.

app/design/frontend/STORE/THEME/web/mage/validation.js

So METHOD 3 is not working as-well.


Method 4

  1. I have override the onepage.phtml file
  2. Added JS file in the module.
  3. And defined JS file in Layout file Checkout_index_index.xml

METHOD 4 is not working as-well.

Any suggestion/ advice is really helpful, Thanks in advance!!



Related Questions


Updated June 14, 2019 12:09 PM

Updated May 16, 2017 12:09 PM

Updated April 04, 2018 08:09 AM

Updated August 27, 2018 06:09 AM

Updated December 28, 2017 14:09 PM