Magento 2 Form Validation – Same Min and Max Length Character Validation for UI Component

form-validationmagento2uicomponent

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?

Best Answer

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>
Related Topic