How to create custom form validations in Magento 2?

If you want to add a custom validation rule in Magento 2 using the mage/validation library, before submitting it to the server, then follow these steps:

Step 1. Decide what way to use to initialize custom form validation in Magento 2:

Using the data-mage-init attribute:

<form id="my-form" data-mage-init='{"validation": {}}'>
    ...
</form>

Using the text/x-magento-init script type tag:

<script type="text/x-magento-init">
    {
        "#my-form": {
            "validation": {}
        }
    }
</script>

Form Magento validation rules can be found here.

Step 2. Input Magento 2 validation rules for a form field:

As a data-validate attribute

<input id="field-1" ... data-validate='{"required":true}'/>

As a data-validate attribute with arguments

<input id="field-1" ... data-validate='{"required":true, "minlength":10}'/>

As an attribute

<input id="field-1" ... required="true"/>

As an attribute with arguments

<input id="field-1" ... required="true" minlength="15"/>

As a class name

<input id="field-1" ... class="input-text required-entry"/>

As a class name with arguments

<input id="field-1" ... class="input-text required-entry" minlength="15"/>

Using data-mage-init

<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true}}}}'>
    ...
</form>

Using data-mage-init with arguments

<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true, "minlength":20}}}}'>
    ...
</form>

Backend form fields validation methods in Magento 2:

<form class="form" id="my-form" method="post" data-mage-init='{"validation":{"rules": {"field-4": {"required":true}}}}'>
    <fieldset class="fieldset">
        <div class="field name required">
            <label class="label" for="field-1"><span>Field 1 (using data-validate)</span></label>
            <div class="control">
                <input name="field-1" id="field-1" title="Field 1" value=""  class="input-text" type="text" data-validate='{"required":true, "url": true}'/>
            </div>
        </div>
        <div class="field name required">
            <label class="label" for="field-2"><span>Field 2 (using attribute)</span></label>
            <div class="control">
                <input name="field-2" id="field-2" title="Field 2" value="" class="input-text" type="text" required="true"/>
            </div>
        </div>
        <div class="field name required">
            <label class="label" for="field-3"><span>Field 3 (using classname)</span></label>
            <div class="control">
                <input name="field-3" id="field-3" title="Field 3" value="" type="text" class="input-text required-entry"/>
            </div>
        </div>
        <div class="field name required">
            <label class="label" for="field-4"><span>Field 4 (using data-mage-init)</span></label>
            <div class="control">
                <input name="field-4" id="field-4" title="Field 4" value="" class="input-text" type="text"/>
            </div>
        </div>
    </fieldset>
    <div class="actions-toolbar">
        <div class="primary">
            <button type="submit" title="Submit" class="action submit primary">
                <span>Submit</span>
            </button>
        </div>
    </div>
</form>

As a result, the Magento 2 form will get validated without submitting it:

validation result

If you want to create custom Magento 2 checkout validations that will be performed before the order is formed or placed, then do the following:

Step 1. Create the validator:

Add your customizations in a separate module and don’t edit the default Magento code. It is recommended that your custom module should depend on the Magento_Checkout module. Create a .js file in the custom module directory when implementing the validator. It should be located under <your_module_dir>/view/frontend/web/js/model directory. 

Create a .js file in the custom module directory when implementing the validator. It should be located under <your_module_dir>/view/frontend/web/js/model directory. Here's a sample of the validator .js file:

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('a possible failure message ...  ') });
                }

                return isValid;
            }
        }
    }
);

Step 2. Add validator to the validators pool:

In the <your_module_dir>/view/frontend/web/js/view directory create a new <your-validation>.js file with the following 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 3. The next step in adding custom Magento 2 checkout validation is to create a new <your_module_dir>/view/frontend/layout/checkout_index_index.xml file in the custom module directory and add the following code to this file's field:

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

Step 4. Deploy static content and clean cache:

Clean the cache in order not to face the Magento 2 form validation not working issue.

The following commands are needed for production mode, they are not needed in developer mode:

Deploy static content:

bin/magento setup:static-content:deploy


Clean cache:

bin/magento cache:clean


If you need even more functionality for your store, then you can use Magento Custom Development Services. The development team can develop a module based on your needs or implement the functionality that you need.

How can we help you?

Didn’t you find the answer to your question? We are always happy to help you out.

© 2009-2021 Amasty. All Rights Reserved.