0

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?

2
  • helped for you?
    – Mital Shah
    Commented Apr 26, 2021 at 11:15
  • I'll check and update you.
    – Abhishek
    Commented Apr 26, 2021 at 15:02

1 Answer 1

2
  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                
            ]
        );
        
    }
}

?>
  1. 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>
  1. 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.__('')
        );
});
  1. 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>
  1. 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.

Your Answer

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

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