0

I have a fieldset in my UI component. Depending on certain conditions, I show/hide fields within it. All fields are initially marked as required in the UI component. However, I want to remove the 'required' validation when the fields are hidden.

if (response.success == true) {
        $('[name="customer_image"]').closest('.admin__field').hide();
        $('[name="kyc_type"]').closest('.admin__field').hide();
        $('[name="kyc_proof"]').closest('.admin__field').hide();
        $('[name="proof_number"]').closest('.admin__field').hide();
}

My ui component fields is like

<fieldset name="proofdetails" sortOrder="20">
     <settings>
        <collapsible>true</collapsible>
        <opened>true</opened>
        <visible>true</visible>
        <label translate="true">Proof Details</label>
        <componentType>fieldset</componentType>
        <additionalClasses>
            <class name="purchase-form-proof-details">true</class>
        </additionalClasses>
    </settings>    
    <field name="customer_image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">string</item>
                <item name="label" xsi:type="string" translate="true">Photo</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="allowedExtensions" xsi:type="string">jpg jpeg png</item>
                <item name="maxFileSize" xsi:type="number">8388608</item>
                <item name="formElement" xsi:type="string">imageUploader</item>
                <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                <item name="dataScope" xsi:type="string">customer_image</item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="url" path="goldscheme/purchase/uploadfile">
                    <param name="target_element_id">customer_image</param>
                    <param name="type">image</param>
                    </item>
                </item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
    <field name="kyc_type">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Ceymox\GoldScheme\Model\Config\Source\ProofType</item>
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" translate="true" xsi:type="string">Proof Type</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="source" xsi:type="string">kyc_type</item>
                <item name="sortOrder" xsi:type="number">40</item>
                <item name="dataScope" xsi:type="string">kyc_type</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
    <field name="kyc_proof">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">string</item>
                <item name="label" xsi:type="string" translate="true">Proof</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png pdf</item>
                <item name="maxFileSize" xsi:type="number">16777216</item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                <item name="dataScope" xsi:type="string">kyc_proof</item>
                <item name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="url" path="goldscheme/purchase/uploadfile"/>
            </item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            </item>
        </argument>
    </field>
    <field name="proof_number">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">input</item>
                <item name="label" translate="true" xsi:type="string">Proof Number</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">proof_number</item>
                <item name="sortOrder" xsi:type="number">50</item>
                <item name="dataScope" xsi:type="string">proof_number</item>
                <item name="validation" xsi:type="array">
                     <item name="alphanumeric" xsi:type="boolean">true</item>
                     <item name="min_text_length" xsi:type="number">10</item>
                     <item name="max_text_length" xsi:type="number">12</item>
                     <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
    <field name="pancard">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">string</item>
                <item name="label" xsi:type="string" translate="true">Pan Card</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png pdf</item>
                <item name="maxFileSize" xsi:type="number">16777216</item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                <item name="dataScope" xsi:type="string">pancard</item>
                <item name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="url" path="goldscheme/purchase/uploadfile"/>
            </item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            </item>
        </argument>
    </field>
    <field name="pancard_number">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">input</item>
                <item name="label" translate="true" xsi:type="string">Pan Number</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">pancard_number</item>
                <item name="sortOrder" xsi:type="number">70</item>
                <item name="dataScope" xsi:type="string">pancard_number</item>
                <item name="validation" xsi:type="array">
                     <item name="alphanumeric" xsi:type="boolean">true</item>
                     <item name="min_text_length" xsi:type="number">10</item>
                     <item name="max_text_length" xsi:type="number">12</item>
                     <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
</fieldset>

How i remove validation when the field is not visible

2 Answers 2

0

I think this may help you

Step 1: Create a Custom JavaScript Component First, you'll need to create a custom JavaScript component that listens for changes in your conditions (e.g., response from an API) and updates the required validation rule of your fields accordingly.

Create a JavaScript file in your module's web directory. For example, view/adminhtml/web/js/custom-validation.js.

define([
    'jquery',
    'uiRegistry'
], function ($, registry) {
    'use strict';

    return function () {
        // Example function to toggle required validation
        function toggleRequiredValidation(fields, state) {
            fields.forEach(function (fieldName) {
                var fieldComponent = registry.get('index = ' + fieldName);
                if (fieldComponent) {
                    fieldComponent.validation['required-entry'] = state;
                    fieldComponent.required(state);
                    fieldComponent.validate();
                }
            });
        }

        // Example usage based on a condition
        // Replace 'response.success' with your actual condition
        if (response.success == true) {
            // Fields you want to toggle validation for
            var fieldsToToggle = [
                'customer_image',
                'kyc_type',
                'kyc_proof',
                'proof_number'
            ];

            // Hide fields and remove required validation
            toggleRequiredValidation(fieldsToToggle, false);
        }
    };
});

Step 2: Include Your JavaScript Component in Your UI Component Modify your UI component's XML layout to include the custom JavaScript component. You can do this by adding a node to your fieldset or form component.

For example, if you're customizing a form in the admin panel, you might have a layout file like view/adminhtml/ui_component/your_form.xml. You can add the script like so:

<form ...>
    ...
    <settings>
        ...
        <deps>
            <dep>Test_ApiData/js/custom-validation</dep>
        </deps>
    </settings>
    ...
</form>

Or, if you need to directly include it in a specific template, you might need to adjust the template to load your JS component.

1
  • I got solution for my issue. My answer is posted here. Than you @RanaZain
    – Chippy Ani
    Feb 21 at 11:17
0

In my JavaScript file, I wrote a function to remove validation based on the below answer.

toggleRequiredValidation: function (fields, state) {
        fields.forEach(function (fieldName) {
            var fieldComponent = uiRegistry.get('index = ' + fieldName);
            console.log('fieldComponent: ' + fieldComponent);
            if (fieldComponent) {
                console.log('Field found: ' + fieldName);
                fieldComponent.validation['required-entry'] = state;
                fieldComponent.validate();
                fieldComponent.error(false);
            } else {
                console.log('Field not found: ' + fieldName);
            }
        });
    },

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.