Magento 2 UI Component admin form conditional required validation

Question

I need to create 2 fields(checkbox and input) in admin catalog form. I created both fields using UI Component.

I need to add a condition that when checkbox is checked then input field will be required. If checkbox is uncheck then this input field is not required.

How can I apply this required validation based on checkbox?

Answer 1

1. Create Attribute Mital/Catalog/Setup/InstallData.php

<?php

namespace Mital\Catalog\Setup;

use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;

class InstallData implements InstallDataInterface
{
    protected $eavSetupFactory;

    public function __construct(
        EavSetupFactory $eavSetupFactory    
    ){
        $this->_eavSetupFactory = $eavSetupFactory;        
    }

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {       
        $eavSetup       = $this->_eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Category::ENTITY,
            'custom_checkbox',
            [
            'type'     => 'int',
            'label'    => 'Custom Checkbox',
            'input'    => 'boolean',
            'source'   => 'Magento\Eav\Model\Entity\Attribute\Source\Boolean',
            'visible'  => true,
            'default'  => '0',
            'required' => false,
            'global'   => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
            ]
        );
        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Category::ENTITY,
            'custom_input',
            [
                'type' => 'text',
                'label' => 'Custom Input',
                'input' => 'text',                
                'source' => '',
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => null                
            ]
        );
        
    }
}

?>

2. Add fields in form Mital/Catalog/view/adminhtml/ui_component/category_form.xml

<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">    
    <fieldset name="custom_category_design">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Custom Category Design</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">30</item>
            </item>
        </argument>    
        <field name="custom_checkbox">
            <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="label" xsi:type="string" translate="true">Custom Checkbox</item>
                    <item name="prefer" xsi:type="string">toggle</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 name="default" xsi:type="number">0</item>
                    <item name="validation" xsi:type="array">                        
                        <item name="custom-check-validation" xsi:type="boolean">true</item>
                    </item>                  
                </item>
            </argument>
        </field>   
        <field name="custom_input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">50</item>
                    <item name="dataType" xsi:type="string">varchar</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="label" xsi:type="string" translate="true">Custom Text Field</item>                    
                    <item name="validation" xsi:type="array">                        
                        <item name="custom-validation" xsi:type="boolean">true</item>
                    </item>   
                    <item name="additionalClasses" xsi:type="array">
                        <item name="my-custom-class" xsi:type="boolean">true</item>
                    </item>            
                </item>
            </argument>
        </field>        
    </fieldset>  
</form>

3. Create validation file Mital/Catalog/view/adminhtml/web/js/custom_validation.js

 require(
        [
            'Magento_Ui/js/lib/validation/validator',
            'jquery',
            'mage/translate'
    ], function(validator, $){

        validator.addRule(
            'custom-validation',
            function (value) {                          
                if($("input[name=custom_checkbox]").val() == 1){                         
                    return false;
                }else {
                    return true;
                }
            }
            ,$.mage.__('This field is required.')
        );

        validator.addRule(
            'custom-check-validation',
            function (value) {                          
                if(value == 1){      
                    $(".my-custom-class").addClass("required");                                         
                }else{
                    $(".my-custom-class").removeClass("required");
                    return true;}                

            }
            ,$.mage.__('')
        );
});

4. Add js file Mital/Catalog/view/adminhtml/layout/catalog_category_add.xml

<?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="Mital_Catalog::js/custom_validation.js"/>
    </head>
</page>

5. Add js file edit category Mital/Catalog/view/adminhtml/layout/catalog_category_edit.xml

<?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="Mital_Catalog::js/custom_validation.js"/>        
    </head>
</page>

You can download code from here.