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');
|
||||
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');
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user