Classic UI Validation

Form field Validation – Classic UI Dialog


We have already seen how to validate a form field in Touch UI here. Now let us see how to create a validation for duplicate check which can be used against any property in classic UI using EXTJS. As an example, I would illustrate the same to check the duplicate for ‘Title’ field in the page properties dialog in a ‘Geomextrixx’ site

PageProperties Dialog
PageProperties Dialog

Override the ‘Basic’ tab of page properties under your project template.

  1. To do the same copy the ‘tab_basic’ node from /libs/foundation/components/page/tab_basic and paste it under your page component node. Ex: /apps/geometrixx/components/page
  2. Need to add 2 properties for a widget to do a validation
  • vtype – validation function which needs to be create for a form field validation
  • vtypeText – custom error message to be displayed
Override BasicTab
Override BasicTab

Create a validation function

  1. All the OOB validation functions are present /libs/cq/ui/widgets/source
  2. To add our custom functions, create a same folder structure under your apps. Ex: /apps/cq/ui/widgets/source
  3. Add js.txt under /apps/cq/ui/widgets
  4. Create a file called ‘duplicateTitleCheck.js’ under /apps/cq/ui/widgets/source
Override CQUI Widget
Override CQUI Widget



Create a service which check for the duplicate for the given property


This service will expect 3 parameters

Validate – property for which the duplicate validation needs to be done

Title – value of the property

pagePath – path of the page where the value is been given.

getDuplicatePath() is the method which queries the JCR for the given value against the property mentioned and returns the list of nodes available under the given content node

Now, go to the page properties and try entering the ‘Title’ which already exists and see the validation works!

Watch out for an Adobe community article soon where you can know much more in detail and get the complete source code!

3 thoughts on “Form field Validation – Classic UI Dialog

  1. When extending or customing an existing component or dialog you can copy or replicate either the entire structure or the structure required for the dialog before making your changes. Extending an existing component can be achieved with Resource Type Hierarchy and the related inheritance mechanisms.

  2. I am trying to do the above requirement for Touch-UI . Can you suggest how that can be done?
    Thanks in advance.


Leave a Reply

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