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">CeymoxGoldSchemeModelConfigSourceProofType</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
