CQ5 Dialog Validation

By registering a listener to the beforesubmit event, you can validate a dialog.

... xtype="dialog"> <listeners jcr:primaryType="nt:unstructured" beforesubmit="function(dialog){ // your validation code return isValid; }" /> <items jcr:primaryType="cq:TabPanel"> ...

Serverside Validation

After defining a custom validating servlet, you can put the following code snippet in the beforesubmit area. It is important to call the servlet using async=false, to ensure everything is handled by the same thread.

CQ.Ext.Ajax.request({ method: 'POST', url: '/content.myvalidationservlet.json', async: false, success: function(response){ // do something }, params: { ... } });

CQ.Dialog in JS

CQ5 code exmaples are rare, so i will post some Javascript Code, that would have helped me a lot. CQ5 is shipped with Ext JS.
See API docs for more options.

var dialog = new CQ.Dialog({ 'width': 600, 'modal': true, 'resize': false, 'title': 'My Title', 'items': { 'xtype': 'tabpanel', 'items': [ { 'xtype': 'panel', 'title': 'Basic', 'hideMode': 'offsets', 'items': [ { 'xtype': 'textfield', 'fieldLabel': CQ.I18n.get('app.components.some.key'), }, //... ] } ] }, 'buttons': [ { 'text': 'Save', 'handler': function() { //... } }, { 'text': 'Cancel', 'handler': function () { this.close(); } } ]});