0

I want to pass the value of checkbox in custom js file, I am using UI component to create a chechbox. So I have to pass this value to js file and then use that value in Model. I am not able to pass the value

<field name="is_new_category_allowed">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Do you want to create new Category</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="number">1</item>
                        <item name="false" xsi:type="number">0</item>
                    </item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

1 Answer 1

1
  1. You have to add a custom js file via the validation
<field name="is_new_category_allowed">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Do you want to create new Category</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="formElement" xsi:type="string">checkbox</item>
            <item name="valueMap" xsi:type="array">
                <item name="true" xsi:type="number">1</item>
                <item name="false" xsi:type="number">0</item>
            </item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
                <item name="custom-check-validation" xsi:type="boolean">true</item> <!-- Here added custom validation -->
            </item>
        </item>
    </argument>
</field>
  1. Create js file for get value of field in js Validation file Vendor/Module/view/adminhtml/web/js/custom_validation.js
 require(
        [
            'Magento_Ui/js/lib/validation/validator',
            'jquery',
            'mage/translate'
    ], function(validator, $){

        validator.addRule(
            'custom-check-validation',
            function (value) {                          
                if(value == 1){   //Here you will get your field's value                      
                    return true;
                }else {
                    return false;
                }
            }
            ,$.mage.__('Custom validation message.')
        );
        
});
  1. Add js file when create new category Vendor/Module/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="Vendor_Module::js/custom_validation.js"/>
    </head>
</page>
  1. Add js file when edit category Vendor/Module/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="Vendor_Module::js/custom_validation.js"/>
    </head>
</page>

If you have any question please let me know.

2
  • Thanks for the answer, how to pass js pass value to my custom model? May 21, 2021 at 10:53
  • Hi @Mital Shah, Can we call this validation <item name="custom-check-validation" xsi:type="boolean">true</item> in our custom php model? May 24, 2021 at 6:24

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.