Add custom validation rule in UI component form field

Hello Dear Friends!!!

In this article, we are going to learn how we can add custom validation in a field in UI component form.
First of all, we will create our custom validation js file. Here, I have created wk-storeurl-validation.js file inside the <magento-root-dir>/app/code/Vendor/Module/view/adminhtml/web/js/ directory.

require(
    [
        'Magento_Ui/js/lib/validation/validator',
        'jquery',
        'mage/translate'
], function(validator, $){
        validator.addRule(
            'wk-storeurl-validation',
            function (value) {
                return !(/[^a-z^A-Z^0-9\.\-]/g.test(value));
            },
            $.mage.__('Store Url can contain dash (-) and alphanumric values only.')
        );
});

Now, we will add this file to the head section of the layout file. Here, I have added my js file in routename_customform_edit.xml file inside the <magento-root-dir>/app/code/Vendor/Module/view/adminhtml/layout/ directory.

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <head>
        <link src="Vendor_Module::js/wk-storeurl-validation.js"/>
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="tenants_form"/>
        </referenceContainer>
    </body>
</page>

Now, we will add our custom validation rule in the form field in the UI component form. Here, I have added my custom validation rule named “wk-storeurl-validation” in the store_url field in the tenants_form.xml file as follows:

<field name="store_url">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Store URL</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">store_url</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="notice" xsi:type="string" translate="true">
                       Enter store URL name. For example: xyzshop
                    </item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <strong><item name="wk-storeurl-validation" xsi:type="boolean">true</item></strong>
                        <item name="validate-no-html-tags" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

Now, when we input the wrong value in the form field store_url and save the form, then we will get an error as in the following image: