required field

[user96222]

i have two fields one is text and another is pathfield 
if textfield is authored then paathfield should be required
if textfield is  not authored then pathfield not required

can anyone help how to write js for this?

[Saravanan_Dharmaraj]

Please check the example which checks for email , similarly you have to read the input field and pathfield from the dialog and have a logic to allow/stop dialog submit based on the your condition.

https://www.albinsblog.com/2018/09/how-to-enable-custom-validation-on-multifield-touch-ui-aem.html#.... 

[Rohit_Utreja · Accepted solution]

@user96222 

Please follow below steps.

1. create a new clientlibs for dialog field validation

2. add this clientlib category in the dialog with property name "extraClientlibs"

3. add granite:data node for textfield and pathfield.

4. capture these fields using the CSS class name provided using granite:data node.

5. validate the dialog by capturing "on-change" event in dialog and check textfield in clientlib js.

Please refer below URL for dialog with extraclientlibs

https://www.albinsblog.com/2019/02/how-to-handle-coral-ui-3-selectdropdown-change-event-touch-ui-dia...

https://www.albinsblog.com/2018/09/how-to-enable-custom-validation-on-multifield-touch-ui-aem.html

I hope it helps.

Thanks,

Rohit

[Jagadeesh_Prakash]

@user96222 I am giving you an example with a checkbox and fields. Try this will work. In place of checkbox you can check for pathfield and make text field mandatory 

1. Add a check box field to your component dialog using the Granite UI components. For example, you can use the coral-checkbox component:<checkbox
   jcr:primaryType="nt:unstructured"
   fieldLabel="Make fields mandatory"
   name="./makeFieldsMandatory"/>

2. Add the fields that you want to make mandatory to your component dialog.

3. Add a client-side validation script to your component dialog that checks the value of the check box and sets the mandatory property of the fields accordingly. For example, you can use the following script:<listeners
   jcr:primaryType="nt:unstructured"
   afterdialogrefresh="function(dialog) {
   var makeFieldsMandatory = dialog.getField('./makeFieldsMandatory').getValue();
   var mandatoryFields = ['./mandatoryField1', './mandatoryField2'];
   for (var i = 0; i < mandatoryFields.length; i++) {
   var field = dialog.getField(mandatoryFields[i]);
   if (makeFieldsMandatory) {
   field.setRequired(true);
   } else {
   field.setRequired(false);
   }
   }
   }"/>

the script listens for the afterdialogrefresh event, which is triggered when the dialog is opened or refreshed. It gets the value of the makeFieldsMandatory check box and an array of mandatory fields. Then, it iterates over the mandatory fields and sets their required property to true or false based on the value of the check box.

Note that the field names in the mandatoryFields array should match the name attributes of the fields in your dialog.

With this setup, the selected fields will be required only if the check box is checked, and they will be optional if the check box is unchecked.