How to Validate Forms in Magento 2?

Mage Delight - January 20, 2021

Steps for Magento 2 custom form validation

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.

How to create Magento 2 Custom Form Validation?
- Step 1. Add the data-mage-init Attribute to the Form Tag
- Step 2. Add Validation Rules to Input Fields (4 Methods)
Bonus - List of Magento Validation
- Conclusion

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

How to create Magento 2 Custom Form Validation?

Here are the steps to add a custom form validation rule in Magento 2.

Step 1. Add the data-mage-init Attribute to the Form Tag

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. Add Validation Rules to Input Fields (4 Methods)

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.