0

With Magento 2 I want to do everything the "clean" way, so without editing any layout files (if possible).

Currently, I am trying to add custom validations to fields at the checkout.

If I create my JS validation rules like this, how do I tell Magento for which fields to use these rules.

1

2 Answers 2

0

In your custom module directory, create a .js file implementing the validator. It should be located under /view/frontend/web/js/model directory.

define(
    [],
    function () {
        'use strict';
        return {
            /**
             * Validate something
             *
             * @returns {boolean}
             */
            validate: function() {
                //Put your validation logic here
                return true;
            }
        }
    }
);

Your custom validator must be added to the pool of “additional validators”. To do this, in the /view/frontend/web/js/view directory create a new .js file with the following content:

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        '<your_module>/js/model/your-validator'
    ],
    function (Component, additionalValidators, yourValidator) {
        'use strict';
        additionalValidators.registerValidator(yourValidator);
        return Component.extend({});
    }
);

In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add the following:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="billing-step" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="payment" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="additional-payment-validators" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <!-- Declare your validation. START -->
                                                        <item name="your-validator" xsi:type="array">
                                                            <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
                                                        </item>
                                                        <!-- Declare your validation. END -->
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>
    </body>
</page>
8
  • 1
    So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for? Commented Jan 23, 2018 at 8:54
  • 'Magento_Checkout/js/model/payment/additional-validators' Commented Jan 23, 2018 at 11:46
  • this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item> Commented Jan 23, 2018 at 11:47
  • @BirjitsinhZala, How can I show a custom message from the validate: function ? Commented Apr 29, 2018 at 8:21
  • afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
    – Anthony
    Commented Jun 13, 2018 at 18:50
0

You must add the validation js file under "shipping-rates-validation" array in checkout_index_index.xml file like below to work on the checkout shipping form.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="step-config" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shipping-rates-validation" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="<your-validation-name>" xsi:type="array">
                                                                <item name="component" xsi:type="string">%your_module%/js/view/%your-validation%</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

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.