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.
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>
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>
