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
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.
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
Define the Dialog Fields:
- The startDate and endDate fields are defined with the xtype of datefield.
- allowBlank="false" ensures the fields cannot be empty.
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.
