AEM 6.2 Code snippets : Touch UI validations

In this article, I am going to cover how to perform validations in AEM 6.2 Touch UI dialogs, in AEM 6.2 the dialog validation framework is changed, we need to use Granite UI foundation registry API’s

I am going to take simple regex validation on textfield , the textfield should allow only alphabets when content authors tries to enter numerics or special symbols it should throw error message

First thing which I am going to do is add a selector  property at component level,here I am going to take OOTB page title field to perform regex validation

Go to the title node of page component and add “validation=regex.validation” property, using this property we are going to find out object of text field in javascript

aem-touchui-validation

Next, create client library folder and the type for this is cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog and dependencies value underscore

Create a file validations.js and add below code

Now, go to the page properties  and try to add numerics or special symbols, you must see error message something like below

aem-touchui-validations

 

  • Rajeevratna

    Thanks Raj Sir..It helped me. 🙂
    –Rajeev from AIG. 🙂

  • Anoop Ojha

    Hi Raj,
    Is there any way that i can validate pathfield as well in touch UI..?

    • Raj Mandalapu

      I never tried but, it should work, let me know if you see any issues

      • Anoop Ojha

        Yes i tried by using above article ,but no luck. I am able to validate when i am closing the dialog, but not able to validate at the time when i am giving the URL in the pathfield.