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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
xml version=”1.0″ encoding=”UTF-8″?> jcr:primaryType=”cq:Dialog” xtype=”dialog”> title=”Example Tab”> jcr:primaryType=”cq:Widget” fieldLabel=”First field” fieldDescription=”Insert your text here” name=”./exampletext0″ xtype=”textfield”/> jcr:primaryType=”cq:Widget” fieldLabel=”Second field” fieldDescription=”And here” name=”./exampletext1″ xtype=”textfield”/> beforesubmit=”function(dialog) {return Example.checkFields(dialog);};”/> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Example = function() { return { // Dialog field cross validation. checkFields : function(dialog,maxWidth,maxHeight) { var textfieldArray = dialog.findByType("textfield"); var textfieldLength0 = textfieldArray[0].getValue().length; var textfieldLength1 = textfieldArray[1].getValue().length; if((textfieldLength0 > 0 && textfieldLength1 > 0) || (textfieldLength0 === 0 && textfieldLength1 === 0)) { // Both fields have or do not have a value return true; } else { // Cross validation fails CQ.Notification.notify(CQ.I18n.getMessage("Validation Error"), CQ.I18n.getMessage("Both fields must be filled or left empty.")); return false; } } }; }(); |
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
|_ /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
|
1 2 3 4 |
xml version="1.0" encoding="UTF-8"?> jcr:primaryType="cq:ClientLibraryFolder" sling:resourceType="widgets/extclientlib"/> |
js.txt
|
1 2 3 |
#base=js Example.js |
I hope to clarify your questions, if you have more, don’t hesitate and ask! Thanks for your comments 🙂
Really good example…
Thank you for your comment! Feel free to tell me if you want more examples or more topics to be discussed.
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.
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
where can i put this javascript code . how Example.checkFields(dailog) function called from dialog?
I had the same question – any response? – Thanks.
Hi, thanks for your comments! I have edited the post, please read from "Edit".
Regards,
Alberto
Gracias!, justo lo que buscaba 😉
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)
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