Fix tabbed form validation handling
This commit is contained in:
@@ -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');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user