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');
if (form instanceof HTMLFormElement) {
const formId = String(form.id || '').trim();
const inputSelector = 'input,select,textarea';
const clearInvalidMarkers = () => {
@@ -251,7 +252,12 @@ export function initTabs(root = document, config = {}) {
};
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) {
return;
}
@@ -275,7 +281,7 @@ export function initTabs(root = document, config = {}) {
const invalidFields = form.querySelectorAll(inputSelector);
for (const field of invalidFields) {
if (!belongsToForm(field) || field.disabled || field.checkValidity()) {
if (!belongsToForm(field, form) || field.disabled || field.checkValidity()) {
continue;
}
let element = field.parentElement;
@@ -309,7 +315,7 @@ export function initTabs(root = document, config = {}) {
return;
}
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');
}
};