Unable to save dialog because of required fields

[goyalkritika]

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?

[Madhur-Madan]

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>

[goyalkritika]

I modified the above js to this - 

where addtocart is the name of option 1 and buttonlabel is the name of mandatory field. Still it is not working. I've even added the clientlib to component level. What am I doing wrong?

[Madhur-Madan]

Hi @goyalkritika ,

When dealing with dialogs in AEM, especially those utilizing CoralUI components, script execution within dialogs can sometimes face timing issues due to when the scripts are loaded in relation to the DOM elements. Here are steps to troubleshoot and potentially resolve this issue:

Check the Loading Sequence:
1. Timing of Script Execution: Ensure the script containing the dialog logic is loaded after the CoralUI components and the document is fully loaded.

2. Console Logs: Place console.log statements within your script to check if the script is being executed and to see the values retrieved from $("coral-select[name='./dropdown']").val();

Also you can try  try executing the script on a broader event like DOMContentLoaded or $(document).ready().

$(document).ready(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();
});

Let me know if it works for you

[pulkitvashisth · Accepted solution]

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.

[kautuk_sahni]

@goyalkritika Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.