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.

Solution:

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

textfield
textfield

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

Clientlibs
Clientlibs

 

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.

$form.find(“[name=’./email‘]”).val()

Now, this can be tested and it works as below

TouchUI_Dialog

TouchUI dialog validation
TouchUI dialog validation

7 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=”my.custom.email.validator” to your text input node and only add the custom validation script to your clientlib:
    $.validator.register({
    selector: ‘[data-validation=”my.custom.email.validator”]’,
    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.

    [0] https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/clientlibs/foundation/js/validation/index.html

     
    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: http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation.

      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: https://github.com/nateyolles/aem-touch-ui-validation.

       
  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 form.foundation-form etc). If u have any ref docs or links to access widget (extjs) related code pls share.

    Regards
    Krishh

     
  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.

    Thanks,
    Echo

     

Leave a Reply

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