Complex client side dialog validation with JavaScript in Adobe CQ5

Complex client side dialog validation with JavaScript in Adobe CQ5

Few days ago I saw in Mark Daugherty’s blog how to provide complex dialog validation with a Servlet, you can also take a look to Sling Servlets in my post about dynamic dialogs. Today, I will provide you a quicker client side validation alternative, indicated if you do not need to access the content and all can be done from the client.

CQ dialog

For this example we will create a simple dialog with two textfields. Our validation goal will be a cross validation between both textfields, if one textfield has a value, the other one must also be filled, leaving both empty will be an option too. To achieve that, we will add a listener for the beforeSubmit event, if we detect something wrong within the validation and return false, the submission will be aborted. You can also get more information about the available dialog’s events here.

The JavaScript validation file

We will write here our validation functions. First of all we will retrieve the textfields from the dialog, if you want to know which functions you can use for a widget you can refer to CQ widget’s documentation. Once we have their values, we will compare them to check if they meet our cross validation rules, if affirmative, we will return true and let the dialog’s submission continue, otherwise we will return an error message to give the author a hint of what went wrong and return false to abort the process.

And that was all! I hope you enjoyed the post, please feel free to add suggestions or comments and to help me spreading knowledge across the internet.Edit: As it seems to be a frequent asked question in the comments I will add where to place this validation function. Supposing that the validation is for this dialog in this component we will place the validation files in a folder named clientlibs in a structure like:/mycomponent (component’s folder)
|_ /clientlibs
|         |_ /js
|         |     |_  Example.js (here the validation file)
|         |_ .content.xml (See later)
|         |_ js.txt (See later)
|_ .content.xml
|_ component.jsp
|_ dialog.xml (the component’s dialog)
|_ … more files of the component

In clientlibs you will also need the files .content.xml, to tell CQ that this folder contains validation files, and js.txt, to tell CQ which files are included in the clientlib.

.content.xml

js.txt

I hope to clarify your questions, if you have more, don’t hesitate and ask! Thanks for your comments 🙂

Tags:
, ,
10 Comments
  • Esai Venthan ADIDRAVID
    Posted at 18:24h, 16 May

    Really good example…

    • albertoalmagro
      Posted at 18:34h, 16 May

      Thank you for your comment! Feel free to tell me if you want more examples or more topics to be discussed.

  • cqexplorer
    Posted at 14:46h, 20 May

    Thanks for the nice article!

    We are doing cross validation in the java script, but how to make sure we depict the same in the UI. When user entered text1, text2 should also be shown mandatory * in the UI.

  • albertoalmagro
    Posted at 17:30h, 20 May

    Hi cqexplorer, thanks!

    What do you mean with the UI? The dialog is already the UI… I have searched at https://dev.day.com/docs/en/cq/current/widgets-api/index.html (Pathfield), but it doesn't have a function to set allowBlank to false on the fly… thinking quickly I had an idea… what about this one? In the validation function you could test if the user has entered text on text1 and on text2, if it doesn't satisfy your validation you could show an error with CQ.Notification.notify("Header of error", "Message of error"); and return false to abort the submission.

    You could also internationalize the messages with CQ.I18n.getMessage("Your message");

    Best regards,
    Alberto

  • Anonymous
    Posted at 17:41h, 21 October

    where can i put this javascript code . how Example.checkFields(dailog) function called from dialog?

  • Anonymous
    Posted at 17:40h, 22 November

    I had the same question – any response? – Thanks.

    • albertoalmagro
      Posted at 19:48h, 25 November

      Hi, thanks for your comments! I have edited the post, please read from "Edit".

      Regards,
      Alberto

  • Miguel Puig
    Posted at 11:42h, 06 November

    Gracias!, justo lo que buscaba 😉

  • Prashanth kumar
    Posted at 11:04h, 16 January

    Hi,

    How to restrict Validation in CQ Dialog to Active Tabs(i.e I have 4 Tabs, but i can change the no.of tabs by selecting the no. of Tabs to be displayed using selection, and all tabs have the same no. and same type of fields)

  • Mahder
    Posted at 22:46h, 26 August

    Hi,
    Thanks for this great post. I have tried same approach you did and its working if the page is opened and I open the dialog from the page’s side kick->property tab. If this way the tag dialog is opened, the validation works just fine. But if you I try to open the page property window from the #siteadmin (without actually opening the page), then the validation fails saying that the JavaScript file is not defined. In your example the JS function is defined in Example.js. So in this case the file Example.js is not defined. Any help is appreciated.

    Thanks