How to Validate Forms in Magento 2?

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.

Step-by-Step Process for Magento 2 Form Validation

Here are the steps for Magento 2 Form Validation:

1. Add the “data-mage-init” attribute with the “validation” alias in the form tag.
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.

Bonus – List of Magento Validation

• range-words
• letters-with-basic-punc
• alphanumeric
• letters-only
• no-whitespace
• max-words
• min-words
• zip-range
• integer
• vinUS
• dateITA
• dateNL
• time
• time12h
• phoneUS
• phoneUK
• mobileUK
• stripped-min-length
• email2
• url2
• credit-card-types
• ipv4
• ipv6
• pattern
• allow-container-className
• less-than-equals-to
• greater-than-equals-to
• validate-emails
• validate-cc-type-select
• validate-cc-number
• validate-cc-type
• validate-cc-exp
• validate-cc-cvn
• validate-cc-ukss
• validate-length
• required-entry
• not-negative-amount
• validate-per-page-value-list
• validate-per-page-value
• validate-new-password
• required-if-not-specified
• required-if-all-sku-empty-and-file-not-loaded
• required-if-specified
• required-number-if-specified
• datetime-validation
• required-text-swatch-entry
• required-visual-swatch-entry
• required-dropdown-attribute-entry
• Validate-item-quantity
• validate-grouped-qty
• validate-one-checkbox-required-by-name
• validate-date-between
• validate-dob
• validate-no-html-tags
• validate-select
• validate-no-empty
• validate-alphanum-with-spaces
• validate-data
• validate-street
• validate-phoneStrict
• validate-phoneLax
• validate-fax
• validate-email
• validate-emailSender
• validate-password
• validate-admin-password
• validate-customer-password
• validate-url
• validate-clean-url
• validate-xml-identifier
• validate-ssn
• validate-zip-us
• validate-date-au
• validate-currency-dollar
• validate-not-negative-number
• validate-zero-or-greater
• validate-greater-than-zero
• validate-css-length
• validate-number
• required-number
• validate-number-range
• validate-digits
• validate-digits-range
• validate-range
• validate-alpha
• validate-code
• validate-alphanum
• validate-date
• validate-date-range
• validate-cpassword
• validate-identifier
• validate-zip-international
• validate-one-required
• validate-state
• required-file
• validate-ajax-error
• validate-optional-datetime
• validate-required-datetime
• validate-one-required-by-name

Conclusion

We hope that you found this tutorial helpful.

And if you need our professional assistance with Magento 2 Developer, feel free to reach out to us anytime.

Recommended: Magento 2 Custom Form Builder to Create Custom Form