required field | Community
Skip to main content
March 1, 2023
Solved

required field

  • March 1, 2023
  • 3 replies
  • 1063 views

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?

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Rohit_Utreja

@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-dialog.html#.Y_-wyC9U3BI

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

 

I hope it helps.

 

Thanks,

Rohit

3 replies

Saravanan_Dharmaraj
Community Advisor
Community Advisor
March 1, 2023

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#.Y_-yCOyZOAk 

Rohit_Utreja
Community Advisor
Rohit_UtrejaCommunity AdvisorAccepted solution
Community Advisor
March 1, 2023

@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-dialog.html#.Y_-wyC9U3BI

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
Community Advisor
Community Advisor
March 2, 2023

@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.