TouchUI dialog validation

AEM Touch UI Dialog Validation


We know that Touch UI is based on Granite UI and JQuery, Now let us see how to use JQuery to validate a field in a dialog of a Touch UI.

Click here to check how the validation is done in Classic UI dialog.

Use Case : Validate a text field for a valid email address input.


Step 1:  Create a component under /apps/<project>

Step 2: Create cq:dialog for touch UI dialog and all the items required.

for ex, I have added a textfield by the name ’email’ for the OOB ‘text’ component


Step 3: Create clientlibs under the component folder. Add ‘cq.authoring.dialog‘ as categories. This enables to use all the functions available in Granite UI.

Step 4: Add a script which has the validation logic using JQuery (ex: validation.js). Make sure you add that js in the js.txt file



validation.js – Validation Script to check the valid email using the pattern

make sure you give ‘name’ of the field for which validation needs to be evaluated.


Now, this can be tested and it works as below


TouchUI dialog validation
TouchUI dialog validation

8 thoughts on “AEM Touch UI Dialog Validation

  1. Hi, I suggest that validating touch ui dialog inputs should be done using Granite’s validation framework [0]. You can just add a property like validation=”” to your text input node and only add the custom validation script to your clientlib:
    selector: ‘[data-validation=””]’,
    validate: function (el) {
    // TODO
    show: function (el) {
    // TODO
    clear: function (el) {
    // TODO

    This will make your validation script reusable for other input fields, independant of the name your provided.


    1. Hi,
      My Next post will be on this. I have just written how can we use simple JQuery aswell to work with Granite/Touch UI. However as you said my next example would be using the Granite Validation Framework.
      Thanks !

    2. Correct.

      I have written a detailed blog post here:

      I have also written a validation library that unobtrusively adds functionality such textfield regular expressions and multifield min/max limits. Using the jquery.validator plugin as Dominik mentions, the added validation’s UI matches the default AEM behavior. The clientlib is available on GitHub:

  2. Hi Lokesh,

    Thanks for the info. You have implemented for Touch UI. Does the same logic applicable for classic UI or not?
    And how do you come across the (.cq-dialog-submit and etc). If u have any ref docs or links to access widget (extjs) related code pls share.


  3. Hi Lokesh,

    In step3, you say “Add ‘cq.authoring.dialog‘ as categories”. Can I write some other words like “openWebC” as categories? And use ” data-sly-use.clientlib=”/libs/granite/sightly/templates/clientlib.html” data-sly-call=”${clientlib.js @ categories=’openWebC’}” ” to include this js.

    Because if I follew your steps. If there are two components both need to be validated. It will be wrong.



Leave a Reply

Your email address will not be published. Required fields are marked *