Custom validation before order placement
In this topic, we are going to discuss how we can add custom validation before the order is placed during checkout.These are the custom validation set when customers click Place Order button and some validations, restrictions or verifications need to be done set before the placing orders.
The custom validations is helpful in many situations Like , if you don’t offer shipping in a specific city and you want to validate the customer has not selected that city then you can validate its input. if its not match the value then you can show this message
To add custom validations before the order placement action, we need to do the following things.
Step 1 : – Firstly create a module using this blog Click Here.
Step 2 :- After Creating the module , You need to create the following new file:
In your custom module directory, create a .js file implementing the validator. It should be located under <your_module_dir>/view/frontend/web/js/model directory.
add the following code in the below file & It must necessarily implement the validate() method:
define(
['mage/translate', 'Magento_Ui/js/model/messageList'],
function ($t, messageList) {
'use strict';
return {
validate: function () {
const isValid = false; //Put your validation logic here
if (!isValid) {
messageList.addErrorMessage({ message: $t('Validation message here.... ') });
}
return isValid;
}
}
}
);
Step 3: Add validator to the validators pool
validator must be added to the pool of “additional validators”. To do this, in the <your_module_dir>/view/frontend/web/js/view directory create a new file <your-validation>.js and add the below code:
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({});
}
);
Step 4: Declare the validation in the checkout file
In your custom module directory, create a new file <your_module_dir>/view/frontend/layout/checkout_index_index.xml .
In this file, add the below code:
<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>
The custom validation message will be look like this.😊
If you want to add Additional info on the Checkout Payment Page you can checkout our blog click here .
If you want to add Additional info after the checkout coupon code then you can follow this blog click here
You can check it out the magento blog how you can Add custom validations before order placement Click here
I hope you like this blog 🙂