How to Validate Forms in Magento 2?

January 20, 2021

Today, we’re going to teach you guys how to validate forms in Magento 2.

Validating forms in Magento 2 is very crucial because it helps to make sure you don’t receive any spam/malicious submissions and the information provided by users is properly formatted.

With that being said, let’s look at the process of how to validate forms in Magento 2.

Steps for Magento 2 Form Validation

Here are the steps for Magento 2 Form Validation:

Step 1. Add the "data-mage-init" attribute with the "validation" alias in the form tag.

Step 2. Add Validation Rules to Input Fields.

Method #1: Use rule name as an attribute.
Method #2: Use rule name as a class name.
Method #3: Use "data-validate" attribute.
Method #4: Set rule in "data-mage-init" attribute of form tag.

Let’s learn each step in-depth.

Step 1

First of all, we need to add “data-mage-init” attribute with “validation” alias in your form using the code below.

<form class="form my-form" action="" method="post" data-mage-init='{"validation":{}}'>
    //Form code
</form>

The above validation alias will invoke JavaScript lib/web/mage/validation/validation.js which generally contains the logic of validation.

Step 2

Next, we need to add a validation rule in input fields.

Now, there are a total of 4 methods to add validation rules in the input fields of a form in Magento 2.

Method #1 - Use Rule Name As an Attribute

<input required="true" name="field" type="text" />

Method #2 - Use Rule Name As Class Name

<input class="input-text required" name="field" type="text" />

Method #3 - Use “Data-Validate” Attribute

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

Method #4 - Set Rule in data-mage-init Attribute of Form Tag

<form class="form my-form" action="" method="post" data-mage-init='{
    "validation":{
        "rules": {
            "fieldname": {
                "required":true
            }
        }
    }
}'>

And that’s it! This is how you can validate forms in Magento 2.