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