How to validate forms in Magento 2?

In this article, I will show you how you can validate the custom form with the default Magento 2 validation library.

Step 1: First of all you need to add "data-mage-init" attribute with "validation" alias in your custom form.

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

The validation alias invokes js lib/web/mage/validation/validation.js which contains the logic of validation.

Step 2: Now you need to add validation rule in input fields.

There are four methods to add validation rules in input fields.

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
            }
        }
    }
}'>

Here is the list of default jQuery validation rules

• required,
• remote,
• email,
• url,
• equalTo,
• maxlength,
• minlength,
• rangelength,
• range,
• max,
• min,
• date,
• dateISO,
• number,
• digits,
• creditcard

Here is the list of Magento validation

You can check these all validation logic in the file: validation.js

• 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

Thank you for Reading. Happy coding…!