Hi @pixislinger
In Adobe Experience Manager (AEM), you can create a custom dialog validation for the number of multifield entries using JavaScript. Here's a step-by-step guide to implementing this validation:
- Create a custom dialog for your component.
- Add a multifield to the dialog.
- Add a clientlib to your project (if you don't have one already) and include the path to the clientlib in your component's dialog.
Now, let's add the validation logic:
- In your clientlib, create a JavaScript file (e.g., multifield-validation.js).
- Add the following code to the JavaScript file:
(function ($, $document) {
'use strict';
var maxRows = 10;
function validateMultifield() {
var multifieldPath = '#path-to-your-multifield';
var multifieldRows = $(multifieldPath + ' > .coral-Form-fieldset');
if (multifieldRows.length > maxRows) {
alert('Error: Maximum rows (' + maxRows + ') reached.');
return false;
}
return true;
}
$document.on('coral-dialog-open', function () {
$('.cq-dialog-submit').on('click', function (e) {
if (!validateMultifield()) {
e.preventDefault();
}
});
});
})($, $(document));
Replace '#path-to-your-multifield' with the actual path to your multifield.
- Include the clientlib in your component's dialog.
Now, when you open the dialog and attempt to add more than 10 rows, an alert will appear displaying the custom error message, and the form submission will be prevented.
For more information on AEM dialogs and clientlibs, you can refer to the following resources:
These resources will help you understand how to work with AEM dialogs and clientlibs, and how to implement custom validations tailored to your specific use case.
Thank you
