I have created a form using UI components. I am able to add min and max length field validation using the below code.
<field name="sku">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Primary Barcode</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">sku</item>
<item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
<item name="min_text_length" xsi:type="number">13</item>
<item name="max_text_length" xsi:type="number">13</item>
</item>
</item>
</argument>
</field>
As you can see min and max length is the same for the field. I do not want is use min_text_length and max_text_length for this validation because it shows an error message like Please enter more or equal than 13 symbols.. Instead, I want to use some validation that can give an error message specifying that the exact 13 characters are required for this field.
How to achieve it?
1 Answer 1
I was able to implement it using below approach.
Added below code to the layout xml file.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="Vendor_Module::js/form/validation.js"/>
</head>
</page>
Added js file Vendor/Module/view/frontend/web/js/form/validation.js with below code:
require(
[
'Magento_Ui/js/lib/validation/validator',
'jquery',
'mage/translate'
], function(validator, $){
validator.addRule(
'barcode-validation',
function (value) {
if(value.length !== 13){
return false;
}else {
return true;
}
}
,$.mage.__('13 characters required.')
);
});
And in the ui component form added the custom validator name
<field name="sku">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Primary Barcode</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">sku</item>
<item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
<item name="barcode-validation" xsi:type="number">13</item>
</item>
</item>
</argument>
</field>
Explore related questions
See similar questions with these tags.