M2: UI Component Form Field Validation

When building custom forms you’ll need to validate a few different types of data. Thankfully there are a number of validation rules already at your disposal in Magento’s core.


<!-- ... abbreviated usage example - vendor/module/view/adminhtml/ui_component/example_form.xml -->
<field name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="dataScope" xsi:type="string">title</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <!-- ... additional rules go here -->
                    </item>
                </item>
            </argument>
        </field>
<!-- ... abbreviated usage example -->

A list of available rules from vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js:

  • min_text_length
  • max_text_length
  • max-words
  • min-words
  • range-words
  • letters-with-basic-punc
  • alphanumeric
  • letters-only
  • no-whitespace
  • zip-range
  • vinUS //US VIN Numbers
  • dateITA
  • dateNL
  • time
  • time12h
  • phoneUS
  • phoneUK
  • mobileUK
  • stripped-min-length
  • email2
  • url2
  • credit-card-types
  • ipv4
  • ipv6
  • pattern //REGEX
  • 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
  • validate-integer
  • validate-number-range
  • validate-digits
  • validate-digits-range
  • validate-range
  • validate-alpha
  • validate-code
  • validate-alphanum
  • validate-date
  • validate-identifier
  • validate-zip-international
  • validate-state
  • less-than-equals-to
  • greater-than-equals-to
  • validate-emails
  • validate-cc-number
  • validate-cc-ukss
  • required-entry
  • checked
  • not-negative-amount
  • validate-per-page-value-list
  • validate-new-password
  • validate-item-quantity
  • equalTo
  • validate-file-type
  • validate-max-size
  • validate-if-tag-script-exist
  • date_range_min
  • date_range_max