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:

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 One Step Checkout extension or Magento Custom Development Services. The development team can develop a module based on your needs or implement the functionality that you need.