Disable textfield on Touch UI cq dialog

Question

I want to call a JS function on load of cq dialog to validate if a field already has something if so, disable it from the edition. I have tried with validation but it is called after the users interact with the field, I need a way to do it before when is being loaded. Is it possible?

<id
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
   fieldLabel="ID"
   validation="is_empty" // DO THIS WHEN IS LOADED
   name="./id"
   required="{Boolean}true"/>

Answer 1

I can think of a way to achieve this using cq.authoring.dialog clientlib and jQquery

• Create a clientlib with categories as cq.authoring.dialog. Scripts in this clientlib are loaded only in the author instance.
• Add a class to the text field using the granite:class attribute, this is to hook onto the textfield using script in the above clientlib

          <id
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
            fieldLabel="ID"
            granite:class="readonlySelector"
            name="./id"
            required="{Boolean}true"/>

• You will have to include the below namespace in dialog.xml to usegranite:class. xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
• Notice the class name registered above in the DOM

• Use one of the OOTB granite event listeners like foundation-contentloaded to fire the script on initialization of the dialog. You could probably use a more narrower event, check out granite documentation for more events

• Use the Coral UI Textfield documentation to find out supported attributes. disabled and readonly are supported. Place this code in the cq.authoring.dialog clientlib.

$(document).on('foundation-contentloaded', function (e) {//event fires when dialog loads
    var $textField = $('.readonlySelector');
    if ($textField.val()) {//truthy check
        $textField.prop('disabled', true);//Greys the field
        $textField.prop('readonly', true);
    }
})

• Grayed and disabled