Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Page template field start and end date validation

Avatar

Level 2

I have a page template I need to validate the StartDate field input is before the EndDate field input.  If it is, an error message needs to display and don't let the user create the page.  What is the best way to accomplish this?

bethen5_0-1717531531601.png

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
4 Replies

Avatar

Correct answer by
Community Advisor

Avatar

Community Advisor

Hi @bethen5 ,

To validate the StartDate and EndDate fields in an AEM page template and ensure that the StartDate is before the EndDate, you can use custom validation logic in the dialog definition of the page template. Here's how you can achieve this:

Step-by-Step Guide

  1. Define the Dialog Fields: Define the StartDate and EndDate fields in your page template dialog. Typically, this is done in the cq:dialog node of your component.

  2. Add Custom Client-Side Validation: Use custom JavaScript to validate the StartDate and EndDate fields. You can include this JavaScript in your dialog to execute on the dialog's submission.

Example Dialog Definition

Here is an example of how you can set up the dialog with the necessary fields and include custom JavaScript for validation:

Define the Dialog Fields

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:Dialog"
          title="Page Properties"
          xtype="dialog">

    <items jcr:primaryType="cq:WidgetCollection">
        <startDate
            jcr:primaryType="cq:Widget"
            fieldLabel="Start Date"
            name="./startDate"
            xtype="datefield"
            allowBlank="false"/>
        <endDate
            jcr:primaryType="cq:Widget"
            fieldLabel="End Date"
            name="./endDate"
            xtype="datefield"
            allowBlank="false"/>
    </items>

    <listeners
        jcr:primaryType="nt:unstructured"
        xtype="listeners"
        beforesubmit="function(dialog) {
            return validateDates(dialog);
        }"/>
</jcr:root>

 

Custom JavaScript Validation

Create a client library (e.g., clientlibs/validation) and include the custom validation script. Ensure this client library is included in your page.

 

// File: /apps/<your-project>/clientlibs/validation/validation.js

function validateDates(dialog) {
    var startDateField = dialog.getField("./startDate");
    var endDateField = dialog.getField("./endDate");

    var startDate = new Date(startDateField.getValue());
    var endDate = new Date(endDateField.getValue());

    if (startDate > endDate) {
        alert("Start Date must be before End Date.");
        return false;
    }
    return true;
}

// Ensure the client library is included
CQ.WCM.getContentDialog().on("beforesubmit", function() {
    return validateDates(CQ.WCM.getContentDialog());
});

 

Step-by-Step Explanation

  1. Define the Dialog Fields:

    • The startDate and endDate fields are defined with the xtype of datefield.
    • allowBlank="false" ensures the fields cannot be empty.
  2. Add Custom Client-Side Validation:

    • The listeners node with the beforesubmit event is used to attach custom validation logic.
    • The validateDates function is called before the dialog is submitted.
    • This function retrieves the values of the startDate and endDate fields, converts them to Date objects, and compares them.
    • If startDate is after endDate, an alert is shown, and the form submission is prevented by returning false.

Including the Client Library

Ensure the client library is included in your page or component. This can be done by referencing the client library in your component's JSP or HTML file:

 

<cq:includeClientLib categories="validation"/>

 

Or in your HTL file:

 

<sly data-sly-use.clientLib="/apps/<your-project>/clientlibs/validation">
    <script src="${clientLib.js}"></script>
</sly>

 

By following these steps, you can ensure that the StartDate is validated against the EndDate in your AEM page template dialog, preventing users from creating a page with invalid date ranges.

Avatar

Community Advisor

I don't think this works, this code is for classic UI. 



Esteban Bustamante

Avatar

Community Advisor

@bethen5 - You can use coral ui APIs and get the values in JS and then add a validation and display the message.