How to add custom validations before place order in Magento 2?
There are several cases where you might want to or need to add custom validations before place order so that the action is completed smoothly. These validations should happen before the actual
place order action is dispatched.
This article will explain how you can add your custom validations to Magento 2 that run on place order button click but before the button action is dispatched. The button action will be dispatched only when all the validations return true.
First of all, we will create a validator. For your custom module to work correctly, it is best if your module depends on Magento_Checkout module.
Create a new .js file in custom module directory under {your_module_dir}/view/frontend/web/js/model. This is the file where will be implementing our custom validator.
Make sure the code implements the validate() method. This is the method that is called by Magento place order code to validate in-built and custom validation actions.
Following is a sample code:
define(
[], // your dependencies
function () {
'use strict';
return {
/**
* Validate something
*
* @returns {boolean}
*/
validate: function() {
// Your validation logic here.
return true;
}
}
}
);Next, you need to add this validator to the validators pool. Validators pool is the object maintained by Magento from which it calls each validator on place order button click.
The place order action will be dispatched only after all the validators in this pool return a successful result.
To add your validator to this pool, create a file {your-validation}.js under {your_module_dir}/view/frontend/web/js/view.
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'{your_module_dir}/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);Now we've added the validator to the validator pool. Next we declare the validation in the checkout layout.
In your custom module directory, create a new checkout_index_index.xml file under {your_module_dir}/view/frontend/layout.
Add the following to the file:
<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>That is all!
Give it a try and keep following our blog posts for more such Magento 2 tips and tricks!