Suppose you as Magento 2 store owner want to custom validate specific order data in the checkout before order placement. There need to be some custom validations performed between the click of the “Place Order” button and the display of the “Order Success/Thank you” page.
In this article, we will see how to add custom validations before order placement in Magento 2. For example, you don’t offer shipping in a specific State and want to validate the shopper has not selected that State. You can also add new field and validate its input. The verification event is triggered before a shopper clicks the “Place Order” button. The following steps will allow you to implement any custom validation before order placement.
Step 1: Create the Validator At the Module Level
Create a .js file in your custom module directory. This is to implement the validator. In this case, the custom module directory is FME/Hello and we create a validate.js file in FME/Hello/view/frontend/web/js/model directory. Following is a sample of the validator. You can code according to your custom validation.
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: Add Validator to the Validators Pool
Create validate.js in FME/Hello/view/frontend/web/js/view directory.
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'FME_Hello/js/model/validate'
],
function (Component, additionalValidators, orderCustomValidation) {
'use strict';
additionalValidators.registerValidator(orderCustomValidation);
return Component.extend({});
}
);
Step 3: Declare the Validation in the Checkout Layout
Add the following code to FME/Hello/view/frontend/layout/checkout_index_index.xml
<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>
Now, that you have implemented the above code. Flush the Cache and validate the implemented code. If you’re facing any issue, then feel free to contact our support team for an instant fix.
References: This article is about:- Magento 2 add custom validation checkout
- Magento 2 shipping address validation
- Magento 2 form validation without submit
- Magento 2 add custom validation rule