3

I need to add custom validation rule to postcode field in my checkout page. Therefore I need to extend Magento_Ui/js/lib/validation/rules.js file.

How can I achieve it in custom module (not theme)?

Improve this question

2 Answers 2

Reset to default
2

You can override inside your module using below way, app/code/Krish/Checkout/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            "Magento_Ui/js/lib/validation/rules": "Krish_Checkout/js/lib/validation/rules"
        }
    }
};

Create js file at app/code/Krish/Checkout/view/frontend/web/js/lib/validation/rules.js

Run php bin/magento setup:static-content:deploy command.

Improve this answer
1
  • Will this same work for magento2.3.3/pub/static/adminhtml/Magento/backend/da_DK/Magento_Ui/js/lib/validation/rules.js
    – Arjun
    Commented Dec 14, 2019 at 6:30
0

If you don't want to override the whole rules file you can extend post-code component

  1. Change postal-code component in Magento_Checkout/layout/checkout_index_index.xml

    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      layout="checkout"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
>
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code-custom</item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-postal-custom" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

  2. Create the new component Magento_Ui/web/js/form/element/post-code-custom.js and add the new validation rule:

    define([
    'jquery',
    'Magento_Ui/js/lib/validation/validator',
    'Magento_Ui/js/form/element/post-code'
], function($, validator, Element) {
    'use strict';

    return Element.extend({
        initialize: function() {

            validator.addRule(
                'validate-postal-custom',
                function(value) {
                    // validation logic
                    return true or false;
                },
                $.mage.__('Please specify a valid postal code')
            );

            this._super();
        }
    });
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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