Reading list Switch to dark mode

    Custom validation before order placement

    Updated 1 June 2023

    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:

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    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.😊

    Screenshot-from-2023-06-01-12-53-20

    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 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home