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)?


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.

  • Will this same work for magento2.3.3/pub/static/adminhtml/Magento/backend/da_DK/Magento_Ui/js/lib/validation/rules.js – Arjun Dec 14 '19 at 6:30

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"
            <referenceBlock name="checkout.root">
                    <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>
  2. Create the new component Magento_Ui/web/js/form/element/post-code-custom.js and add the new validation rule:

    ], function($, validator, Element) {
        'use strict';
        return Element.extend({
            initialize: function() {
                    function(value) {
                        // validation logic
                        return true or false;
                    $.mage.__('Please specify a valid postal code')

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.