diff --git a/src/pat/autotoc/autotoc.js b/src/pat/autotoc/autotoc.js index 6a0ca5fa04..968ae2773a 100644 --- a/src/pat/autotoc/autotoc.js +++ b/src/pat/autotoc/autotoc.js @@ -139,20 +139,29 @@ export default Base.extend({ initialize_validation: function ($el) { const el = $el[0]; - // Initialize only on pat-validation forms. - const form = el.closest("form.pat-validation"); + // Initialize only on forms + const form = el.closest("form"); if (!form) { return; } for (const tab of this.tabs) { - if (tab.section.querySelectorAll("[required]").length > 0) { + if ( + tab.section.querySelectorAll( + "label.required, label .required, [required]", + ).length > 0 + ) { tab.nav.classList.add("required"); } else { tab.nav.classList.remove("required"); } } + // Initialize the validation css class markings only for pat-validation forms. + if (!form.matches(".pat-validation")) { + return; + } + const debounced_validation_marker = utils.debounce(() => { this.validation_marker(); }, this.options.validationDelay); diff --git a/src/pat/autotoc/autotoc.test.js b/src/pat/autotoc/autotoc.test.js index 2720c8d5ec..fbfdb29bcf 100644 --- a/src/pat/autotoc/autotoc.test.js +++ b/src/pat/autotoc/autotoc.test.js @@ -193,10 +193,16 @@ describe("2 - AutoTOC with tabs", function () { const tabs = document.querySelectorAll(".autotoc-nav > a"); expect(tabs.length).toEqual(3); + // Reqwuired checks expect(tabs[0].classList.contains("required")).toEqual(false); expect(tabs[1].classList.contains("required")).toEqual(true); expect(tabs[2].classList.contains("required")).toEqual(false); + // Validation checks + expect(tabs[0].classList.contains("invalid")).toEqual(false); + expect(tabs[1].classList.contains("invalid")).toEqual(false); + expect(tabs[2].classList.contains("invalid")).toEqual(false); + inp1.dispatchEvent(events.change_event()); inp2.dispatchEvent(events.change_event()); inp3.dispatchEvent(events.change_event()); @@ -265,4 +271,41 @@ describe("2 - AutoTOC with tabs", function () { expect(spy_validation_marker).toHaveBeenCalledTimes(1); jest.restoreAllMocks(); }); + + it.skip("2.3 - Also set required for checkboxes or radio buttons, where no required attribute might be set on the input itself but instead on or near the label.", async function () { + document.body.innerHTML = ` +
+
+ Tab 1 + +
+ +
+ Tab 2 + +
+ +
+ Tab 3 +
+
+ `; + + registry.scan(document.body); + await utils.timeout(1); + + const tabs = document.querySelectorAll(".autotoc-nav > a"); + expect(tabs.length).toEqual(3); + + expect(tabs[0].classList.contains("required")).toEqual(true); + expect(tabs[1].classList.contains("required")).toEqual(true); + expect(tabs[2].classList.contains("required")).toEqual(false); + }); });