I tried to implement a simple field validation for a checkbox Apply Special Price which I needed on the Catalog > Product > Edit page. Unfortunately my first attempt below didn’t work and broke the whole grid table.
|
1 |
The requested component ("settings") is not found. Before using, you must add the implementation. |
Here is how I have defined the field apply_special_price in category_form.xml based on different stackoverflow posts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<field name="apply_special_price"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> .... </item> </argument> <settings> <validation> <rule name="required-entry" xsi:type="boolean">false</rule> </validation> <dataType>boolean</dataType> </settings> <formElements> <checkbox> <settings> <valueMap> <map name="false" xsi:type="string">0</map> <map name="true" xsi:type="string">1</map> </valueMap> <prefer>toggle</prefer> </settings> </checkbox> </formElements> </field> |
As I said, it didn’t work at all. So, I kept researching and found a solution which allowed me to implement the validation rule without the nodes <settings> and <formElements> inside of <field>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<field name="apply_special_price"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">boolean</item> <item name="formElement" xsi:type="string">checkbox</item> <item name="source" xsi:type="string">category</item> <item name="label" xsi:type="string" translate="true">Apply Special Price</item> <item name="sortOrder" xsi:type="number">10</item> <item name="default" xsi:type="number">0</item> <item name="prefer" xsi:type="string">toggle</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">false</item> </item> <item name="valueMap" xsi:type="array"> <item name="true" xsi:type="string">1</item> <item name="false" xsi:type="string">0</item> </item> </item> </argument> </field> |
Basically, everything has to be defined inside of config otherwise the XML for your custom UI component will be invalid. The section validation allows you to define filters for pretty much every use case. The example below sets a field as mandatory and detects white spaces. Beside that it will make sure the value matches a specific regex pattern.
|
1 2 3 4 5 |
<item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">false</item> <item name="no-whitespace" xsi:type="boolean">true</item> <item name="validate-pattern" xsi:type="string">/^[a-z][a-z0-9_.-]$/i</item> </item> |
More validation options are available out-of-the-box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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 |