Page template field start and end date validation | Community
Skip to main content
B
bethen5
Level 2
June 4, 2024
Solved

Page template field start and end date validation

  • June 4, 2024
  • 3 replies
  • 1209 views

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?

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

HrishikeshKagne
Community Advisor
HrishikeshKagneCommunity Advisor
Community Advisor
June 5, 2024

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.

Hrishikesh Kagane
    EstebanBustamante
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    June 5, 2024

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

    Esteban Bustamante
    Nikhil-Kumar
    Community Advisor
    Nikhil-KumarCommunity Advisor
    Community Advisor
    June 5, 2024

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

      Terms & ConditionsAccessibility statement

      Loading footer...