How to validate forms in Magento 2?
How to validate forms in Magento 2?

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…!

Leave a Reply

Close Menu