提问人：bendroide 提问时间：7/22/2023 更新时间：7/22/2023 访问量：20
如何验证每个 TAB 的字段，如果未输入每个 TAB 的必填字段，请不要启用以下 TAB
How to validate the fields of each TAB, if the mandatory fields of each TAB are not entered, do not enable the following TABs
问：
我有 5 个包含字段的 TAB，我想验证每个选项卡的字段，如果未输入，请禁用以下选项卡，以下示例仅适用于一个，但它启用了所有字段，某种方法可以解决它
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="ibox-content">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">Case Creation <i class="fa-solid fa-folder"></i></a>
</li>
<li class="disabled li1">
<a href="#tab2" data-toggle="">Attributes <i class="fa-duotone fa-circle-nodes"></i></a>
</li>
<li class="disabled">
<a href="#tab3" data-toggle="">Individual Involvement <i class="fa-solid fa-person"></i></a>
</li>
<li class="disabled">
<a href="#tab4" data-toggle="">Agency Involvement <i class="fa-solid fa-building"></i></a>
</li>
<li class="disabled">
<a href="#tab5" data-toggle="">Review Information <i class="fa-solid fa-memo"></i></a>
</li>
</ul>
<form id="createCase" name="createCase">
<div class="panel blank-panel">
<div class="panel-body">
<div class="tab-content">
<!-- aqui inicia el tab1 -->
<div class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control tab_1" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="caseNumber" placeholder="Enter case number"
class="form-control tab_1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="t" class="form-control tab_1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="dddd" class="form-control tab_1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="ddddddddd" class="form-control tab_1">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btnPrevious">Cancel</button>
<button type="button" class="btn btn-primary btnNext" disabled="disabled">Next</button>
</div>
</div>
<!-- / AQUI TERMINA EL TAB1 -->
<!------------------------------------------ AQUI INICIA EL TAB2 ------------------------------------------------------>
<div class="tab-pane" id="tab2">
<h2>Tab 2 Content</h2>
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control tab_2" id="c2">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="c22" placeholder="Enter case number"
class="form-control tab_2">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="t" class="form-control tab_2">
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious2">Previous</button>
<button type="button" class="btn btn-primary btnNext2" disabled="disabled">Next2</button>
</div>
</div>
<!-- -------------------------------- / AQUI TERMINA EL TAB2 ------------------- -->
<div class="tab-pane" id="tab3">
<h2>Tab 3 Content</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control tab_3" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="caseNumber" placeholder="Enter case number"
class="form-control tab_3">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious3">Previous</button>
<button type="button" class="btn btn-primary btnNext3 disabled="disabled">Next2</button>
</div>
</div>
<!--------------------------------- aqui inicia el tab4 --------------------------------------------->
<div class="tab-pane" id="tab4">
<h2>Tab 4 Content</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control tab_4" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="caseNumber" placeholder="Enter case number"
class="form-control tab_4">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious4">Previous</button>
<button type="button" class="btn btn-primary btnNext4" disabled="disabled">Next2</button>
</div>
</div>
<!-------------------------------/ aqui termina el tab4 -------------------------------------------------->
<!-------------------------- AQUI INICIA EL TAB5 -------------------------------------->
<div class="tab-pane" id="tab5">
<h2>Tab 5 Content</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control tab_5" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" id="caseNumber" placeholder="Enter case number"
class="form-control tab_5">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious5">Previous</button>
<button type="button" class="btn btn-primary btnNext5" disabled="disabled">Next2</button>
</div>
</div>
<!---------------------------------- /AQUI TERMINA EL TAB5 ------------------------------------->
</div>
</div>
</div>
</form>
</div>
</body>
<script>
$(".btnNext").click(function () {
$(".nav-tabs > .active").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function () {
$(".nav-tabs > .active").prev("li").find("a").trigger("click");
});
/*============== funcionalidad tabs ==============*/
// Obtener una lista de los elementos que deseas agregar el evento
const elementosTab1 = document.querySelectorAll('.tab_1');
function validarTab1() {
const camposTab1 = document.querySelectorAll('#tab1 .tab_1');
const btnNext = document.querySelector('#tab1 .btnNext');
const todosCompletos = Array.from(camposTab1).every(function (elemento) {
return elemento.value.trim().length > 0;
});
if (todosCompletos) {
btnNext.removeAttribute('disabled');
setNonActiveTabsDisabled(false);
} else {
btnNext.setAttribute('disabled', 'disabled');
//setNonActiveTabsDisabled(true);
}
}
document.querySelectorAll('#tab1 .tab_1').forEach(function (elemento) {
elemento.addEventListener('keyup', validarTab1);
});
/*============== funcionalidad tabs ==============*/
const setTabDisabled = (tabEl, isDisabled = true) => {
tabEl.setAttribute("class", isDisabled ? "disabled" : "");
const tabLink = tabEl.querySelector('a');
tabLink.setAttribute("data-toggle", isDisabled ? "" : "tab");
};
const setNonActiveTabsDisabled = (isDisabled = true) => {
document.querySelectorAll('.nav.nav-tabs li:not(.active)').forEach(element => {
setTabDisabled(element, isDisabled);
});
};
</script>
</html>
因此，我们的想法是逐个 TAB 与以下选项卡进行对话， 以下逻辑仅适用于验证第一个 TAB 的字段，但启用其他 TAB，主要思想是逐个 TAB 执行 TAB，输入必填字段以启用其他 TAB
答： 暂无答案
评论