FORMS-25983 Add min/max cross-validation to authoring dialogs

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/clientlibs/editor/utils/utils.js

@@ -316,6 +316,138 @@
                 hiddenFields[i].remove();
             }
         }
+
+        /**
+         * Returns an initializeEditDialog-compatible handler that validates min < max in real time.
+         * Works for both wrapperClass selectors (class on a wrapper div) and granite:class selectors
+         * (class on the coral field itself) by looking for a coral-numberinput or coral-datepicker
+         * inside the selector before falling back to the selector element itself.
+         *
+         * @param {String}   minSelector  Dialog-prefixed CSS selector for the min field or its wrapper
+         * @param {String}   maxSelector  Dialog-prefixed CSS selector for the max field or its wrapper
+         * @param {String}   minMsg       Error message shown on the min field when min > max
+         * @param {String}   maxMsg       Error message shown on the max field when min > max
+         * @param {Function} [compareFn]  Optional (a, b) => boolean. Defaults to numeric comparison.
+         */
+        static handleMinMaxValidation(minSelector, maxSelector, minMsg, maxMsg, compareFn) {
+            return function(dialog) {
+                function getCoralField(selector) {
+                    var container = dialog.find(selector);
+                    if (!container.length) return null;
+                    var inner = container.find("coral-numberinput, coral-datepicker");
+                    return (inner.length ? inner : container)[0];
+                }
+                var minField = getCoralField(minSelector);
+                var maxField = getCoralField(maxSelector);
+                if (!minField || !maxField) return;
+                var compare = compareFn || INT_COMPARE;
+                function validate() {
+                    var minVal = minField.value, maxVal = maxField.value;
+                    var invalid = !!(minVal && maxVal && compare(minVal, maxVal));
+                    var minErrMsg = Granite.I18n.getMessage(minMsg);
+                    var maxErrMsg = Granite.I18n.getMessage(maxMsg);
+                    if (invalid) {
+                        minField.invalid = true;
+                        maxField.invalid = true;
+                        minField.errorMessage = minErrMsg;
+                        maxField.errorMessage = maxErrMsg;
+                    } else {
+                        // Only clear invalid if this listener set it — avoids clobbering
+                        // required/pattern errors that another validator placed on the field.
+                        if (minField.errorMessage === minErrMsg) {
+                            minField.invalid = false;
+                            minField.errorMessage = "";
+                        }
+                        if (maxField.errorMessage === maxErrMsg) {
+                            maxField.invalid = false;
+                            maxField.errorMessage = "";
+                        }
+                    }
+                }
+                validate();
+                minField.addEventListener("change", validate);
+                maxField.addEventListener("change", validate);
+            };
+        }
+
+        /**
+         * Registers a foundation.validation.validator that blocks dialog submission when min > max.
+         * Must be called once at module scope (not inside initializeEditDialog) to avoid stacking
+         * duplicate validators on every dialog open.
+         *
+         * @param {String}   minFieldSelector  Bare CSS selector targeting the coral field for min
+         * @param {String}   maxFieldSelector  Bare CSS selector targeting the coral field for max
+         * @param {String}   minMsg            Error message for the min field
+         * @param {String}   maxMsg            Error message for the max field
+         * @param {Function} [compareFn]       Optional (a, b) => boolean. Defaults to numeric comparison.
+         */
+        static registerMinMaxValidator(minFieldSelector, maxFieldSelector, minMsg, maxMsg, compareFn) {
+            var compare = compareFn || INT_COMPARE;
+            $(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
+                selector: minFieldSelector + ", " + maxFieldSelector,
+                validate: function(el) {
+                    var dialog = $(el).closest("coral-dialog");
+                    var minField = dialog.find(minFieldSelector)[0];
+                    var maxField = dialog.find(maxFieldSelector)[0];
+                    if (!minField || !maxField) return;
+                    var minVal = minField.value, maxVal = maxField.value;
+                    if (minVal && maxVal && compare(minVal, maxVal)) {
+                        if (el === minField) {
+                            return Granite.I18n.getMessage(minMsg);
+                        }
+                        return Granite.I18n.getMessage(maxMsg);
+                    }
+                }
+            });
+        }
     }
 
+    // ─── Shared min/max validation for container components ──────────────────
+    // panelcontainer__minOccur / __maxOccur is shared across accordion, wizard,
+    // tabsontop, verticaltabs, and fragment — none of which have their own
+    // editDialog.js — so registration is centralised here.
+    var INT_COMPARE = function(a, b) { return parseInt(a, 10) > parseInt(b, 10); };
+
+    var MIN_MAX_PAIRS = [
+        {
+            minSelector: ".cmp-adaptiveform-panelcontainer__minOccur coral-numberinput",
+            maxSelector: ".cmp-adaptiveform-panelcontainer__maxOccur coral-numberinput",
+            minMsg: "Minimum occurrence cannot be greater than maximum occurrence",
+            maxMsg: "Maximum occurrence cannot be less than minimum occurrence",
+            compareFn: INT_COMPARE
+        }
+    ];
+
+    var Utils = window.CQ.FormsCoreComponents.Utils.v1;
+
+    // Register all foundation submit-time validators once at page load.
+    MIN_MAX_PAIRS.forEach(function(pair) {
+        Utils.registerMinMaxValidator(
+            pair.minSelector,
+            pair.maxSelector,
+            pair.minMsg,
+            pair.maxMsg,
+            pair.compareFn
+        );
+    });
+
+    // Auto-wire real-time change listeners whenever any dialog opens.
+    channel.on("foundation-contentloaded", function(e) {
+        if (!$(e.target).find(".cq-dialog-content").length) return;
+        Coral.commons.ready(e.target, function() {
+            var dialog = $(e.target);
+            MIN_MAX_PAIRS.forEach(function(pair) {
+                if (dialog.find(pair.minSelector).length && dialog.find(pair.maxSelector).length) {
+                    Utils.handleMinMaxValidation(
+                        pair.minSelector,
+                        pair.maxSelector,
+                        pair.minMsg,
+                        pair.maxMsg,
+                        pair.compareFn
+                    )(dialog);
+                }
+            });
+        });
+    });
+
 })(jQuery, jQuery(document), Coral);

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/editor/js/editDialog.js

@@ -26,6 +26,10 @@
         DATEPICKER_DEFAULTDATE = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__defaultdate",
         DATEPICKER_MINDATE = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__mindate",
         DATEPICKER_MAXDATE = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__maxdate",
+        DATEPICKER_MIN_FIELD = ".cmp-adaptiveform-datepicker__mindate coral-datepicker",
+        DATEPICKER_MAX_FIELD = ".cmp-adaptiveform-datepicker__maxdate coral-datepicker",
+        DATEPICKER_MIN_MSG = "Minimum date cannot be after maximum date",
+        DATEPICKER_MAX_MSG = "Maximum date cannot be before minimum date",
         Utils = window.CQ.FormsCoreComponents.Utils.v1;
 
 
@@ -69,5 +73,28 @@
         maxDateTooltip.innerHTML = fieldDescription;
     }
 
-    Utils.initializeEditDialog(EDIT_DIALOG)(handleDisplayPatternDropDown,handleDisplayFormat,handleEditPatternDropDown,handleEditFormat,handleLang,handleDatePlaceholders);
+    var DATE_COMPARE = function(a, b) {
+        var da = new Date(a), db = new Date(b);
+        return !isNaN(da) && !isNaN(db) && da > db;
+    };
+
+    Utils.registerMinMaxValidator(
+        DATEPICKER_MIN_FIELD, DATEPICKER_MAX_FIELD,
+        DATEPICKER_MIN_MSG, DATEPICKER_MAX_MSG,
+        DATE_COMPARE
+    );
+
+    Utils.initializeEditDialog(EDIT_DIALOG)(
+        handleDisplayPatternDropDown,
+        handleDisplayFormat,
+        handleEditPatternDropDown,
+        handleEditFormat,
+        handleLang,
+        handleDatePlaceholders,
+        Utils.handleMinMaxValidation(
+            DATEPICKER_MIN_FIELD, DATEPICKER_MAX_FIELD,
+            DATEPICKER_MIN_MSG, DATEPICKER_MAX_MSG,
+            DATE_COMPARE
+        )
+    );
 })(jQuery);

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datetime/v1/datetime/_cq_dialog/.content.xml

@@ -77,6 +77,7 @@
                                                     type="datetime"
                                                     emptyText="YYYY-MM-DD HH:mm"
                                                     name="./minimumDateTime"
+                                                    wrapperClass="cmp-adaptiveform-datetime__minimumDateTime"
                                                     valueFormat="YYYY-MM-DD[T]HH:mm:ss.000-00:00"/> <!-- Enforce UTC timezone to be timezone agnostic -->
                                             <minimumMessage
                                                     jcr:primaryType="nt:unstructured"
@@ -93,6 +94,7 @@
                                                     emptyText="YYYY-MM-DD HH:mm"
                                                     type="datetime"
                                                     name="./maximumDateTime"
+                                                    wrapperClass="cmp-adaptiveform-datetime__maximumDateTime"
                                                     valueFormat="YYYY-MM-DD[T]HH:mm:ss.000-00:00"/> <!-- Enforce UTC timezone to be timezone agnostic -->
                                             <maximumMessage
                                                     jcr:primaryType="nt:unstructured"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datetime/v1/datetime/clientlibs/editor/js/editDialog.js

@@ -15,4 +15,30 @@
  ******************************************************************************/
 (function($) {
     "use strict";
+
+    var EDIT_DIALOG = ".cmp-adaptiveform-datetime__editdialog",
+        DATETIME_MIN_FIELD = ".cmp-adaptiveform-datetime__minimumDateTime coral-datepicker",
+        DATETIME_MAX_FIELD = ".cmp-adaptiveform-datetime__maximumDateTime coral-datepicker",
+        DATETIME_MIN_MSG = "Minimum date-time cannot be after maximum date-time",
+        DATETIME_MAX_MSG = "Maximum date-time cannot be before minimum date-time",
+        Utils = window.CQ.FormsCoreComponents.Utils.v1;
+
+    var DATE_COMPARE = function(a, b) {
+        var da = new Date(a), db = new Date(b);
+        return !isNaN(da) && !isNaN(db) && da > db;
+    };
+
+    Utils.registerMinMaxValidator(
+        DATETIME_MIN_FIELD, DATETIME_MAX_FIELD,
+        DATETIME_MIN_MSG, DATETIME_MAX_MSG,
+        DATE_COMPARE
+    );
+
+    Utils.initializeEditDialog(EDIT_DIALOG)(
+        Utils.handleMinMaxValidation(
+            DATETIME_MIN_FIELD, DATETIME_MAX_FIELD,
+            DATETIME_MIN_MSG, DATETIME_MAX_MSG,
+            DATE_COMPARE
+        )
+    );
 })(jQuery);

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/_cq_dialog/.content.xml

@@ -101,6 +101,7 @@
                     </basic>
                     <validation
                         jcr:primaryType="nt:unstructured"
+                        jcr:title="Validation"
                         sling:resourceType="granite/ui/components/coral/foundation/container">
                         <items jcr:primaryType="nt:unstructured">
                             <columns

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/clientlibs/editor/js/editDialog.js

@@ -21,6 +21,10 @@
         FILEINPUT_MINITEMS_ERRMSG = EDIT_DIALOG + " .cmp-adaptiveform-fileinput__minimumFilesMessage",
         FILEINPUT_MAXITEMS = EDIT_DIALOG + " .cmp-adaptiveform-fileinput__maximumFiles",
         FILEINPUT_MAXITEMS_ERRMSG = EDIT_DIALOG + " .cmp-adaptiveform-fileinput__maximumFilesMessage",
+        FILEINPUT_MIN_FIELD = ".cmp-adaptiveform-fileinput__minimumFiles coral-numberinput",
+        FILEINPUT_MAX_FIELD = ".cmp-adaptiveform-fileinput__maximumFiles coral-numberinput",
+        FILEINPUT_MIN_MSG = "Minimum files cannot be greater than maximum files",
+        FILEINPUT_MAX_MSG = "Maximum files cannot be less than minimum files",
     Utils = window.CQ.FormsCoreComponents.Utils.v1;
 
     /**
@@ -46,6 +50,17 @@
             hideAndShowElements();
         });
     }
-    Utils.initializeEditDialog(EDIT_DIALOG)(handleMultiSelection);
+    Utils.registerMinMaxValidator(
+        FILEINPUT_MIN_FIELD, FILEINPUT_MAX_FIELD,
+        FILEINPUT_MIN_MSG, FILEINPUT_MAX_MSG
+    );
+
+    Utils.initializeEditDialog(EDIT_DIALOG)(
+        handleMultiSelection,
+        Utils.handleMinMaxValidation(
+            FILEINPUT_MIN_FIELD, FILEINPUT_MAX_FIELD,
+            FILEINPUT_MIN_MSG, FILEINPUT_MAX_MSG
+        )
+    );
 
 })(jQuery);

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/_cq_dialog/.content.xml

@@ -79,6 +79,7 @@
                     </basic>
                     <validation
                         jcr:primaryType="nt:unstructured"
+                        jcr:title="Validation"
                         sling:resourceType="granite/ui/components/coral/foundation/container"/>
                     <help
                             jcr:primaryType="nt:unstructured"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/_cq_dialog/.content.xml

@@ -87,6 +87,7 @@
                     </basic>
                     <validation
                         jcr:primaryType="nt:unstructured"
+                        jcr:title="Validation"
                         sling:resourceType="granite/ui/components/coral/foundation/container">
                         <items jcr:primaryType="nt:unstructured">
                             <columns

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/clientlibs/editor/js/editDialog.js

@@ -22,10 +22,14 @@
         NUMERICINPUT_EXCLUDEMAXCHECK = EDIT_DIALOG + " .cmp-adaptiveform-numberinput__excludeMaximumCheck",
         NUMERICINPUT_MINIMUM = EDIT_DIALOG + " .cmp-adaptiveform-numberinput__minimum",
         NUMERICINPUT_EXCLUDEMINCHECK = EDIT_DIALOG + " .cmp-adaptiveform-numberinput__excludeMinimumCheck",
+        NUMERICINPUT_MIN_FIELD = ".cmp-adaptiveform-numberinput__minimum",
+        NUMERICINPUT_MAX_FIELD = ".cmp-adaptiveform-numberinput__maximum",
         NUMERICINPUT_DISPLAYPATTERN = EDIT_DIALOG + " .cmp-adaptiveform-numberinput__displaypattern",
         NUMERICINPUT_DISPLAYFORMAT = EDIT_DIALOG + " .cmp-adaptiveform-numberinput__displayformat",
         NUMERICINPUT_LANG = EDIT_DIALOG + " .cmp-adaptiveform-numberinput__lang",
         NUMERICINPUT_LANGDISPLAYVALUE = EDIT_DIALOG + " .cmp-adaptiveform-numberinput__langdisplayvalue",
+        NUMERICINPUT_MIN_MSG = "Minimum value cannot be greater than maximum value",
+        NUMERICINPUT_MAX_MSG = "Maximum value cannot be less than minimum value",
         Utils = window.CQ.FormsCoreComponents.Utils.v1;
 
     /**
@@ -96,5 +100,23 @@
         Utils.handlePatternFormat(dialog,NUMERICINPUT_LANGDISPLAYVALUE,NUMERICINPUT_LANG);
     }
 
-    Utils.initializeEditDialog(EDIT_DIALOG)(handleDisplayPatternDropDown,handleDisplayFormat,handleLang, handleTypeDropdown);
+    var NUMBER_COMPARE = function(a, b) { return Number(a) > Number(b); };
+
+    Utils.registerMinMaxValidator(
+        NUMERICINPUT_MIN_FIELD, NUMERICINPUT_MAX_FIELD,
+        NUMERICINPUT_MIN_MSG, NUMERICINPUT_MAX_MSG,
+        NUMBER_COMPARE
+    );
+
+    Utils.initializeEditDialog(EDIT_DIALOG)(
+        handleDisplayPatternDropDown,
+        handleDisplayFormat,
+        handleLang,
+        handleTypeDropdown,
+        Utils.handleMinMaxValidation(
+            NUMERICINPUT_MIN_FIELD, NUMERICINPUT_MAX_FIELD,
+            NUMERICINPUT_MIN_MSG, NUMERICINPUT_MAX_MSG,
+            NUMBER_COMPARE
+        )
+    );
 })(jQuery);

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/clientlibs/editor/js/editDialog.js

@@ -20,6 +20,10 @@
         TEXTINPUT_ALLOWRICHTEXT = EDIT_DIALOG + " .cmp-adaptiveform-textinput__allowrichtext",
         TEXTINPUT_MAXLENGTH = EDIT_DIALOG + " .cmp-adaptiveform-textinput__maxlength",
         TEXTINPUT_MINLENGTH = EDIT_DIALOG + " .cmp-adaptiveform-textinput__minlength",
+        TEXTINPUT_MIN_FIELD = ".cmp-adaptiveform-textinput__minlength coral-numberinput",
+        TEXTINPUT_MIN_MSG = "Minimum length cannot be greater than maximum length",
+        TEXTINPUT_MAX_MSG = "Maximum length cannot be less than minimum length",
+        TEXTINPUT_MAX_FIELD = ".cmp-adaptiveform-textinput__maxlength coral-numberinput",
         BASE_PLACEHOLDER = EDIT_DIALOG + " .cmp-adaptiveform-base__placeholder",
         TEXTINPUT_VALUE = EDIT_DIALOG + " .cmp-adaptiveform-textinput__value",
         TEXTINPUT_RICHTEXTVALUE = EDIT_DIALOG + " .cmp-adaptiveform-textinput__richtextvalue",
@@ -76,6 +80,21 @@
         patternComponent.addEventListener("change", updateDisplayValueExpression);
     }
 
-    Utils.initializeEditDialog(EDIT_DIALOG)(handleValidationPatternDropDown,handleValidationFormat,handleDisplayPatternDropDown,handleDisplayFormat,handleDisplayValueExpression);
+    Utils.registerMinMaxValidator(
+        TEXTINPUT_MIN_FIELD, TEXTINPUT_MAX_FIELD,
+        TEXTINPUT_MIN_MSG, TEXTINPUT_MAX_MSG
+    );
+
+    Utils.initializeEditDialog(EDIT_DIALOG)(
+        handleValidationPatternDropDown,
+        handleValidationFormat,
+        handleDisplayPatternDropDown,
+        handleDisplayFormat,
+        handleDisplayValueExpression,
+        Utils.handleMinMaxValidation(
+            TEXTINPUT_MIN_FIELD, TEXTINPUT_MAX_FIELD,
+            TEXTINPUT_MIN_MSG, TEXTINPUT_MAX_MSG
+        )
+    );
 
 })(jQuery);