Unable to save dialog because of required fields

Question

I have a component with a dropdown. Based on the selection, the fields will be shown in the dialog box.

Suppose there are two options, option 1 and option 2.

On selecting option 1, a field shows up which is a required field.

Now, the issue is that even if I don't select any value from the dropdown, I'm not able to save the dialog box because of the "required=true" condition on the option 1 field. How can I resolve this issue?

pulkitvashisth · Accepted Answer

To have one item in a multifield component as default when you add the component on the page, you can listen to the loadcontent event fired by the Multifield after the content has been loaded and use the addItem() method. Here is an example of how you can achieve this:

<paths  jcr:primaryType="cq:Widget"  fieldLabel="Select Paths"  name="./paths"  xtype="multifield">  
    <fieldConfig  jcr:primaryType="nt:unstructured"  xtype="pathfield" />  
    <listeners  jcr:primaryType="nt:unstructured"  loadcontent="function (field, record)  
    {  
        if (record.get ('paths') == undefined)  
        {  
            field.addItem (); 
            field.doLayout ();  
        }  
    }" /> 
</paths>

In this example, the loadcontent event is used to check if the paths record is undefined. If it is, the addItem() method is called to add a new item, and doLayout() is called to refresh the layout. This will ensure that at least one item is displayed in the dialog by default. Please replace paths with your field name.

Madhur-Madan · Answer

Hi @goyalkritika ,

In your client-side JavaScript file, listen for changes in the dropdown and toggle the 'required' attribute of the field accordingly.

(function($, $document) {
  "use strict";

  $document.on("foundation-contentloaded", function() {
    // Function to handle dropdown change
    function handleDropdownChange() {
      var dropdownValue = $("coral-select[name='./dropdown']").val();
      var requiredField = $("coral-textfield[name='./requiredField']");

      // Set 'required' attribute based on the selected value
      requiredField.prop("required", dropdownValue === "option1");
    }

    // Event listener for dropdown change
    $("coral-select[name='./dropdown']").on("change", handleDropdownChange);

    // Trigger the event on dialog load (initial state)
    handleDropdownChange();
  });
})($, $(document));

Include the client library in your AEM component's dialog by referencing it in your component's dialog's using extraClientlibs

<dialog
  jcr:primaryType="nt:unstructured"
  ...
  extraClientlibs="[yourproject.validation]"
>
  <!-- Dialog fields and structure -->
</dialog>

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded