Fix tabbed form validation handling

This commit is contained in:
2026-03-19 21:41:20 +01:00
parent ae74fc3251
commit 3147009498

View File

@@ -219,6 +219,7 @@ export function initTabs(root = document, config = {}) {
const form = container.closest('form'); const form = container.closest('form');
if (form instanceof HTMLFormElement) { if (form instanceof HTMLFormElement) {
const formId = String(form.id || '').trim();
const inputSelector = 'input,select,textarea'; const inputSelector = 'input,select,textarea';
const clearInvalidMarkers = () => { const clearInvalidMarkers = () => {
@@ -251,7 +252,12 @@ export function initTabs(root = document, config = {}) {
}; };
const onFormClickCapture = (event) => { const onFormClickCapture = (event) => {
const trigger = event.target.closest('button, [type="submit"]'); const target = event.target;
if (!(target instanceof Element)) {
return;
}
const trigger = target.closest('button, [type="submit"]');
if (!trigger) { if (!trigger) {
return; return;
} }
@@ -275,7 +281,7 @@ export function initTabs(root = document, config = {}) {
const invalidFields = form.querySelectorAll(inputSelector); const invalidFields = form.querySelectorAll(inputSelector);
for (const field of invalidFields) { for (const field of invalidFields) {
if (!belongsToForm(field) || field.disabled || field.checkValidity()) { if (!belongsToForm(field, form) || field.disabled || field.checkValidity()) {
continue; continue;
} }
let element = field.parentElement; let element = field.parentElement;
@@ -309,7 +315,7 @@ export function initTabs(root = document, config = {}) {
return; return;
} }
const fields = panel.querySelectorAll(inputSelector); const fields = panel.querySelectorAll(inputSelector);
if (Array.from(fields).every((field) => !belongsToForm(field) || field.disabled || field.checkValidity())) { if (Array.from(fields).every((field) => !belongsToForm(field, form) || field.disabled || field.checkValidity())) {
tab.classList.remove('has-invalid'); tab.classList.remove('has-invalid');
} }
}; };