How to Add Custom Validations Before Order Placement in Magento 2?

Dhiren Vasoya

1 year ago

Hello Magento Friends,

In today’s blog, I will explain How to Add Custom Validations Before Order Placement in Magento 2.

In some cases, you may want to implement custom validations before allowing a customer to place an order on your Magento 2 store. This could be necessary for various reasons, such as ensuring that certain conditions are met or that specific data is provided. By customizing the validation process, you can enhance the overall user experience and maintain the integrity of your store’s data.

Let’s find out How to Add Custom Validations Before Order Placement in Magento 2.

Steps to Add Custom Validations Before Order Placement in Magento 2:

Step 1: Create a file in the path given below.

{{magento_root}}\app\code\Vendor\Extension\view\frontend\layout\checkout_index_index.xml

Then add the code as follows

<?xml version="1.0"?>
<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">
                                                                    <!-- START validation Code. -->
                                                                    <item name="orderValidation" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Vendor_Extension/js/view/validate</item>
                                                                    </item>
                                                                    <!-- END validation Code. -->
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

Step 2: Create a file in the path given below.

{{magento_root}}\app\code\Vendor\Extension\view\frontend\web\js\view\validate.js

Now add the code as given below

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        'Vendor_Extension/js/model/validate'
    ],
    function (Component, additionalValidators, orderCustomValidation) {
        'use strict';
        additionalValidators.registerValidator(orderCustomValidation);

        return Component.extend({});
    }
);

Step 3: Create a file in the path given below.

{{magento_root}}\app\code\Vendor\Extension\view\frontend\web\js\model\validate.js

Then after add the below-mentioned code

define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal',
        'mage/url',
        'mage/validation'
    ],
    function ($, modal, url) {
        'use strict';
        return {
            validate: function () {
               var order = false;                
                // return true if order success
                // return false if restrict order
                
                // Code for Order restrict here
                
                return order;
            }
        };
    }
);

Step 4: After that, run the below commands.

php bin/magento setup:upgrade	
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Conclusion:

By following these steps, you can easily add custom validations before order placement in your Magento 2 store. This customization can help you maintain the quality of your orders and provide a better shopping experience for your customers.

Also, check other tutorials related to custom validation in Magento 2.

Share the tutorial for adding custom validation before order placement in Magento 2 with your friends, and stay updated for more such solutions from us.

Happy Coding!