Today, we’re going to teach you guys how to add custom validations before order placement in Magento 2.
Learning how to add custom validations is helpful in many situations. For example, if you don’t offer shipping in a specific city want to validate the customer has not selected that city, you can add its field and validate its input.
In simple words, to custom validate any specific data before order placement, you need to perform your custom validation between the click on the “Place Order” button action & the “Order Success/Thank You” page.
And in this tutorial, we will show you exactly how to add custom validations before order placement in your Magento 2 store.
Steps to Add Custom Validations Before Order Placement in Magento 2
Please follow the below steps to learn how to implement custom validations before orders placement in your Magento 2 store.
Step 1.
First of all, you need to create the validator at the module level. For this, you need to create a validate.js file in the MageDelight/Hello/view/frontend/web/js/model folder & paste the following code.
define(
[
'jquery',
'Magento_Ui/js/modal/modal',
'mage/url',
'mage/validation'
],
function ($, modal, url) {
'use strict';
return {
validate: function () {
var orderFlag = false;
// Code for Order restrict here
// return true if order success
// return false if restrict order
return orderFlag;
}
};
}
);
Step 2.
After that, you need to add the validator to the validators pool. For this, you need to create a validate.js file in the MageDelight/Hello/view/frontend/web/js/view/ folder & paste the following code.
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'MageDelight_Hello/js/model/validate'
],
function (Component, additionalValidators, orderCustomValidation) {
'use strict';
additionalValidators.registerValidator(orderCustomValidation);
return Component.extend({});
}
);
Step 3.
Lastly, you need to declare the custom validation on the checkout page of your Magento 2 store.
For this, you need to paste the following code in the checkout_index_index.xml file inside MageDelight/Hello/view/frontend/layout/ folder.
<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="component" xsi:type="string">uiComponent</item> <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"> <item name="orderVerifyValidation" xsi:type="array"> <item name="component" xsi:type="string">Vendor_Module/js/view/validate</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock> </body> </page>
Finally, flush the cache and check the output.
Also read: How to Enable Phone Number Validation in Magento 2 Commerce?
Ending Note
And that’s about it!
This is how you can add custom validations before order placement in your Magento 2 store.
And if you need our professional assistance, feel free to contact us at any time.