如何使用导航选项卡和引导程序验证验证按钮步骤表单

编程问答 2022-04-23

问题描述

我有某种“步骤表单”，带有导航选项卡和选项卡之间的按钮导航。如果用户尚未完成当前选项卡的所需输入，我想防止选项卡更改为下一个选项卡。如何使用 bootstrap 4 验证器使当前选项卡按钮验证表单？我尝试使用多个表单提交输入，但它不起作用

//BUTTON NAVIGATION BETWEEN TABS
$('.next').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
});

$('.prevIoUs').click(function () {
    $('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
});

// BOOTSTRAP FORM VALIDATION
  (function() {
    'use strict';
    window.addEventListener('load',function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms,function(form) {
        form.addEventListener('submit',function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        },false);
      });
    },false);
  })();
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-6">
                <br>
                <br>
                <br>
                <ul class="nav nav-tabs text-center" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="step1-tab" data-toggle="tab" href="#step1" role="tab" aria-controls="step1" aria-selected="false">Step 1</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="step2-tab" data-toggle="tab" href="#step2" role="tab" aria-controls="step2" aria-selected="false">Step 2</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="step3-tab" data-toggle="tab" href="#step3" role="tab" aria-controls="step3" aria-selected="false">Step 2</a>
                    </li>
                </ul>
                <form action="" class="needs-validation" novalidate>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="step1" role="tabpanel" aria-labelledby="step1-tab">
                            <br> 
                            <label for="input1">INPUT 1</label>
                            <input type="text" class="form-control" id="input1" required>  
                            <div class="invalid-Feedback">required FIELD</div>
                            <button class="btn btn-lg next">Next</button>
                        </div> 
                        <div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="step2-tab">
                            <br> 
                            <label for="input2">INPUT 2</label>
                            <input type="text" class="form-control" id="input2" required>   
                            <div class="invalid-Feedback">required FIELD</div>
                            <button class="btn btn-lg back">Back</button>
                            <button class="btn btn-lg next">Next</button>
                        </div>
                        <div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="step3-tab">
                            <br> 
                            <label for="input3">INPUT 3</label>
                            <input type="text" class="form-control" id="input3" required>  
                            <div class="invalid-Feedback">required FIELD</div>
                            <button class="btn btn-lg back">Back</button>
                            <button type="submit" class="btn btn-lg">Submit</button>   
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-2"></div>
        </div>
    </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrapvalidatorformsformsformsjavascriptjquerytwitter-bootstrap