Ui component validation remove using js magento2

Question

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

Answer 1

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.

• Chippy Ani: I got solution for my issue. My answer is posted here. Than you @RanaZain

Answer 2

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);
 }
 });
 },