Magento 2.2 – Digits Range Validation in UI-form

form-validationmagento2.2ui-formvalidation

How to add digits range validation rule to the input field inside the UI-form?

Best Answer

In case you needed a digits range validation you should pass a range inside the rule's body as a --separated string, like this:

<field name="day" formElement="input">
    <settings>
        <dataType>text</dataType>
        <label translate="true">Day</label>
        <validation>
            <rule name="validate-number" xsi:type="boolean">true</rule>
            <rule name="validate-digits-range" xsi:type="string">1-31</rule>
        </validation>
    </settings>
</field>

which leads to the error The value is not within the specified range. when value less or greater than specified in the rule's body.

Related Solutions

Magento 2 Form Validation – Numeric Rules for Form Validation

You can try the below code.

Only added 'validate-length':true in the tag.

<input value="Name" name="first_name" id="first_name_field" class="input-text" data-validate="{required:true,'validate-length':true, 'min_text_length':'20'}" type="text">

<input value="Name" name="first_name" id="first_name_field" data-validate="{required:true, 'validate-length':true}" class="validate-length minimum-length-[0-9]+$ maximum-length-[0-9]+$ input-text" type="text" />

Magento – UI form validation in Magento 2

You can use validate-digits for validating number

<item name="validation" xsi:type="array">
    <item name="validate-digits" xsi:type="boolean">true</item>
</item>

Here is the list of validation which you can use in UI form

min_text_length
max_text_length
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
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-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-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

Best Answer

Related Solutions

Magento 2 Form Validation – Numeric Rules for Form Validation

Magento – UI form validation in Magento 2

Related Topic