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?
Solved! Go to Solution.
Views
Replies
Total Likes
Hi,
You need a custom validation for that section, please check these examples:
https://medium.com/@debal.india2014/aem-touch-ui-page-property-field-validation-1117556d8a46
https://aemhints.com/2020/11/02/validating-dialog-value/
https://lucanerlich.com/docs/aem/dialog-validation/
Hope this helps
Hi,
You need a custom validation for that section, please check these examples:
https://medium.com/@debal.india2014/aem-touch-ui-page-property-field-validation-1117556d8a46
https://aemhints.com/2020/11/02/validating-dialog-value/
https://lucanerlich.com/docs/aem/dialog-validation/
Hope this helps
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:
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.
Here is an example of how you can set up the dialog with the necessary fields and include custom JavaScript for validation:
<?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>
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());
});
Define the Dialog Fields:
Add Custom Client-Side Validation:
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.
I don't think this works, this code is for classic UI.
Views
Replies
Total Likes
Views
Likes
Replies