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.

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? Jan 23 '18 at 8:54
  • 'Magento_Checkout/js/model/payment/additional-validators' Jan 23 '18 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> Jan 23 '18 at 11:47
  • @BirjitsinhZala, How can I show a custom message from the validate: function ? Apr 29 '18 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
    Jun 13 '18 at 18:50
0

Maybe this link can help you: http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_order.html

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, privacy policy and cookie policy

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