How to customize the validation rule in Magento 2

During the development process of your e-commerce store, you will receive a wide range of data from your customers. Determining the validity of this data is an essential task for you. With the support of the default Magento 2 tools , you can quickly create a custom attribute validation rule to check for correct input.

Let’s explore how to customize the validation rule through the below process:

• How To Add Validation In Magento 2
• How To Create A Validator At Magento 2 Module Level
• Magento 2 Validation Rules

Example Of Validation

Here is how validation looks on the registration page.

How To Add Validation In Magento 2

Step 1: Connect Validator To The Form

To help the fields inside the form pass validation, you need to add the following attribute

<form /> tag:
        <form data-mage-init='{"validation":{}}' … >

Step 2: Insert Validation Rules To The Element Of The Form

You can use different ways to do this:

• The first way: You can declare validation rules in the data-mage-init attribute

 <form data-mage-init='{
                "validation":{
                        "rules": {
                                "login": {
                                        "required":true
                                }
                        }
                }
        }' … >

• The second way: You can insert the data-validate attibute into element

  <input type="text" data-validate='{"required":true}' name="login" id="login" ... />
  

• The third way: The rule name can be used as an attribute

  <input type="text" required="true" name="login" id="login" ... />
  

• The fourth way: The rule name can be used as a class

  <input type="text" class="input-text required" name="login" id="login" ... /><a id="step_2" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 16px;"></a>
  

How To Create A Validator At Magento 2 Module Level

Step 1: Make A New JS File With A Custom Validation Rule

In this step, you need to use the addMethod to add a new rule. There are two parameters:

• The first parameter: The validator name
• The second parameter: The function which has two possible values true or false. If the function shows false, the user gets a label with the error text, which should be shown in the third parameter.

Step 2: Connect The Validator

According to your goals, you can connect the validator in different ways.

2.1. Access The JS In The Layouts Where Should Be Used The Validator

<link src="Vendor_Module::js/validation.js"/>

After creating the validator, add it to the required element.

2.2. In The Requirejs-config.js File, Register The JS File

After registering the JS file, you need to create the requirejs-config.js file.

For example:

 app/code/<Vendor>/<Module>/view/frontend/requirejs-config.js.
        var config = {
           map: {
               "*": {
                   myValidation: "<Vendor_Module>/js/validation"
               }
           }
        };

Connect the validator in the phtml file:

  <script type="text/x-magento-init">
           {
               "*": {
                   "myValidation": {}
               }
           }
        </script>

You can add the created validator to the required element.

2.3. Validation Check In Custom JS

In case you want to perform some other actions besides the validation check, you can determine the form validation in the Js file:

 $('#btn').on('click', function() {
            var form = '#form';
            if ($(form).validation() && $(form).validation('isValid')) {
                //true
            } else {
                //false
            }
        });
        

Note: There are a large number of out-of-the-box validators in Magento, so before creating your validator, you need to check whether it has been created before you or not.

Magento 2 Validation Rules

The below table shows a list of validation rules for the latest Magento version. There are two columns in this table. The first column shows attribute names, and the second column contains the text of the error.

JQuery Rules

Please access the lib/web/jquery/jquery.validate.js file to view a list of rules, as below:

Magento Rules

Please access the lib/web/mage/validation.js file to view a list of rules, as below:

Conclusions

That’s all! I’ve provided you he detailed instructions for adding custom validation rule in Magento 2. Hopefully, this article is useful to you. If you have any questions or want to add something, please let me know by commenting below.

Customer Attributes for Magento 2

Enrich client data sources for better customer understanding and segmentation

(15 reviews)

Check it out!