0

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?

Improve this question

1 Answer 1

Reset to default
0

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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.