Article summary

Summary

Discusses how to use JavaScript to validate fields of a Classic UI component dialog.

A special thank you to Navin Kaushal, a top AEM community members, for contributing code featured in this Experience Manager community article.

Digital Marketing Solution(s) Adobe Experience Manager 6.2
Audience Developer
Required Skills CSS, HTML 
Version 6.2

Note:

You can download an AEM package that contains code used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to validate a dialog fields, including email, used in a Classic UI component. This community code is for teaching purposes only and not meant to go into production as is. You can view the sample community application by using the following URL:

http://localhost:4502/cf#/content/learnvalidate.html

Download

Introduction

You can validate fields in an Adobe Experience Manager classic UI dialog with custom JavaScript logic. You can validate fields before saving the data in nodes for any dialog using the Experience Manager classic UI. In this development article, you will learn how to apply custom validations to dialog fields in the classic UI by using JavaScript.

Note:

This article discusses how to access and validate dialog fields by using JavaScript. You can apply similar JavaScript logic to your own dialog fields to address your project's business requirements. 

A classic UI Dialog validation message

Likewise, you can validate email fields, as shown in the following illustration. 

Validation on an email field

Create an application folder structure

Create an application folder structure that contains templates, components, and pages by using CRXDE Lite.

An Experience Manager folder structure

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on. 
  • components: contains components that your application uses. 
  • content: contains page components. A page component is a script such as a JSP file.
  • page: contains page components that your application uses. 
  • template: contains templates on which you base page components. 

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter learning
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.

Create a template for the summit toys site

You can create a template by using CRXDE Lite. An AEM template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
2. Right-click the template folder (within your application), select Create, Create Template.
3. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter home
  • Title: The title that is assigned to the template. 
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter learning/components/page/home.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

4. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.
5. Click Next for Allowed Parents.
6. Select OK on Allowed Children.

Create a Page Rendering Component

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.

2. Right-click /app/learning/components/page, then select Create, Create Component.

3. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter home
  • Title: The title that is assigned to the component. 
  • Description: The description that is assigned to the template. 
  • Super Type: wcm/foundation/components/page

4. Select Next for Advanced Component Settings and Allowed Parents.

5. Select OK on Allowed Children.

6. Open the home.jsp located at: /app/learning/components/page/home/home.jsp.

7. Add the code located in the following sections to the corresponding file. 

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<html>
<head>
<title>Home Page</title>
</head>
<body>
Here is Body of HTML
<cq:include path="learn" resourceType="learning/components/content/carousel" />
</body>
</html>
<cq:includeClientLib categories="app.learning" />

Note:

The Resource type references the component that is developed in the next section of this article. 

Create an Experience Manager component

After you setup the AEM folder structure, create the custom component. Perform these tasks using CRXDE Lite:

1. Right click on /apps/learning/components/content and then select New, Component.

2. Enter the following information into the Create Component dialog box:

  •  Label: The name of the component to create. Enter carousel.
  •  Title: The title that is assigned to the component. Enter carousel.
  •  Description: The description that is assigned to the template. Enter carousel.
  •  Super Resource Type: Enter foundation/components/parbase.
  •  Group: The group in the side rail or side kick where the component appears. Enter Learning. (The developers component is located under the Adobe heading in the Touch UI side rail. Also appears in Adobe in the classic view sidekick.)
  • Allowed parents: Enter */*parsys.

3. Click Ok.

 

Add the following code to the carousel.jsp file.

<%@page session="false"%><%
%><%@ include file="/libs/foundation/global.jsp" %><%
%>

Component Comes here

Add a dialog to the AEM component

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article lets the AEM author specify the 3 different text fields (this is just example to show) in the profile component, First Name, Last Name, Email.

An Experience Manager classic UI dialog

The following illustration shows the JCR nodes that create the dialog. 

JCR nodes that create the component dialog

To create the dialog for the component, follow these steps:

1. Select /apps/learning/components/content/carousel, right click and select Create, Create Dialog.

2. In the Title field, enter dialog.

3. Click Ok.

4. Delete all nodes under /apps/learning/components/content/carousel/dialog.

5. Click on the following node: /apps/learning/components/content/carousel/dialog.

6. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:Widget

7. Add the following property to the items node.

  • xtype (String) - tabpanel

8. Click on the following node: /apps/learning/components/content/carousel/dialog/items.

9. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:Widget

10. Click on the following node: /apps/learning/components/content/carousel/dialog/items/items

11. Right click and select Create, Create Node. Enter the following values:

  • Name: tab1
  • Type: cq:Panel

12. Add the following property to the items node.

  • title (String) - Profile Fields 1

13. Click on the following node: /apps/learning/components/content/carousel/dialog/items/items/tab1.

14. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollection

15. Click on the following node: /apps/learning/components/content/carousel/dialog/items/items/tab1/items.

16. Right click and select Create, Create Node. Enter the following values:

  • Name: fname
  • Type: nt:unstructured

17. Add the following properties to this node:

  • fieldLabel (String) - First Name
  • id (String) - firstName
  • name (String) - ./fname
  • xtype (String) - textfield

18. Click on the following node: /apps/learning/components/content/carousel/dialog/items/items/tab1/items.

19. Right click and select Create, Create Node. Enter the following values:

  • Name: lname
  • Type: nt:unstructured

20. Add the following properties to this node:

  • fieldLabel (String) - Last Name
  • id (String) - lastName
  • name (String) - ./name
  • xtype (String) - textfield

21. Click on the following node: /apps/learning/components/content/carousel/dialog/items/items/tab1/items.

22. Right click and select Create, Create Node. Enter the following values:

  • Name: email
  • Type: nt:unstructured

23. Add the following properties to this node:

  • fieldLabel (String) -Email
  • id (String) - emailAdd
  • name (String) - ./email
  • xtype (String) - textfield

24. Click on the following node: /apps/learning/components/content/carousel/dialog.

25. Right click and select Create, Create Node. Enter the following values:

  • Name: listeners
  • Type: nt:unstructured

26. Add the following property to this node: 

  • beforesubmit (String) - function(dialog){return learningValidation.beforeSubmit(dialog);}

Configuring the Edit Behavior

You can configure the component’s edit behavior by adding a node of type cq:EditConfig below the hero component. You determine the component’s behavior by setting child nodes and properties. For more information, see Configuring the Edit Behaviour of a Component.

To add a cq:EditConfig node to the component, perform these tasks:

1. Select /apps/learning/components/content/carousel, right click and select Create, Create Node.

2. Enter the following values:

  • Name: cq:EditConfig
  • Type: cq:EditConfig

3. Click Ok.

4. Add the following properties to this node: 

  • cq:actions (String[]) - text:Carousel, -, edit, delete, cut, copymove, paste, insert
  • cq:dialogMode (String) - floating
  • cq:layout (String) - editbar

 

floating

Add JavaScript files to a CQ:ClientLibraryFolder node

Add the following JavaScript file to an AEM CQ:ClientLibraryFolder node:

  • validate.dialog.js: defines the application logic that validates the component's dialog fields. 

To add this JS file, add a cq:ClientLibraryFolder node. After you create the node, set this property that allows the component script to find the JS file.

  • categories (String) - app.learning

validate.dialog.js file

The validate.dialog.js  file contains application logic to validate the dialog fields. The following code represents this file.   

/*
Validating Dialog Fields in Classic UI
*/
var  learningValidation = learningValidation || (function($) {
    // $ sign here is a parameter, which is set to jQuery 

	// this can be use to initialize the variables
    function initialize() {
		
    };

	// validate fields
    function validate() {

        var msg = "Please correct following: \n =============================== \n\n";
        var res = true;

        // text field firstName
        if ($.trim($('#firstName').val()) == "") {
            msg += "First Name Should not be Blank \n";
            res = false;
        }

        // text field lastName
        if ($.trim($('#lastName').val()) == "") {
            msg += "Last Name Should not be Blank \n";
            res = false;
        }

        // text field emailName
        if ($.trim($('#emailAdd').val()) == "") {
            msg += "Email Should not be Blank \n";
            res = false;
        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($('#emailAdd').val()) === false) {
			msg += "Email Should be a valid Email Address \n";
			res = false;
        }

        if(!res) {
			alert(msg);
        };

        return res;
    };

    return {
        beforeSubmit: validate,        
        init: initialize
    }
})(jQuery);


window.onload(learningValidation.init());

Note:

In the previous code example, notice how JQuery selector syntax can be used to reference the Id property specified in the dialog. 

Create a ClientLib node

1. Right-click /apps/learning/components/content/carousel, then select New, Node.

2. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.

3. Right click on clientlibs and select Properties. Add the property specified in this section.

4. Right click on clientlibs and select Create, Create Folder. Name the folder js.

5 . Right click on the js folder and select Create, Create File. Name the file validate.dialog.js. Add the code specified in this article to the file.

6. Add a TXT file to the clientlibs folder named js.txt. Add this content: 

 

#base=js
validate.dialog.js

Create a page based on the HOME template

The final task is to create an AEM site that lets an author enter values into the dialog, as shown in this illustration. 

The dialog of the component created in this article

If you leave the fields blank or enter a non-email value into the email field, a validation message appears as a result of the application logic in the validate.dialog.js file being invoked. 

Create an Experience Manager web page based on the Home template:

1. Go to the AEM page at http://localhost:4502/siteadmin#/content.

2. Select New Page.

3. Specify the title of the page in the Title field.

4. Specify the name of the page in the Name field.

5. Select Homepage Template (Learning) from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.

6. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser.

7. Click the Edit button in the component. 

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy