Question

我想迫使用户在单击“下一步”按钮移至下一个选项卡之前，填写当前表单上的所有必填字段。我正在使用Bootstrap表单验证。每个“下一个”按钮都包含在其自己的表单中。我面临的问题如下：

1-即使当前表单上的必填字段仍然为空，即使“表单验证”失败，单击“ NEXT”按钮也将转到下一个选项卡。这意味着 event.preventDefault（）和 event.stopPropagation（）不会阻止用户移动到下一个选项卡。为了尝试解决此问题，我将代码放在 $（document）.ready（function（）内），因为我读到某个地方可以解决此问题，但没有解决。

2-在下一个选项卡上，我仍然无法在我称为“ form”的变量中获取当前Form。由于某些原因，即使移至下一个标签页，可变窗体也仅保留第一个窗体。

有人可以指出我正确的方向吗？以下是我的HTML代码和脚本的代码段。谢谢您的帮助。

<p>Requestor Information</p>

 <!--This form allows the user to provide information about his profile-->
 <form class="need-validation-for-requestor-data" id="RequestorTabDataForm" novalidate>
      <div style="margin-left:12px">
           <div class="form-row">

 <!---Some more stuff here--->


 <!---Some more stuff here--->

           </div>

 <!---Some more stuff here--->

      </div>

      <a href="#" role="button" id="previousBtnProjectInformation"class="btn btn-secondary btn-tab-prev">Previous</a>
      <a href="#" role="button" id="nextBtnProjectInformation"class="btn btn-secondary btn-tab-next">Next</a>


 </form>



 <script>


   $('.btn-tab-prev').on('click', function (e) {

        e.preventDefault();
        $('#' + $('.nav-item > .active').parent().prev().find('a').attr('id')).tab('show');

   });




 $('.btn-tab-next').on('click', function (e) {

            // Fetch current form to apply custom Bootstrap validation


         var form = $('#' + $('.btn-tab-next').parent().find('form').attr('id'));    // Pass the current form on click...

      if (form[0].checkValidity() === false) {  //If the validation failed... 
           e.preventDefault();   //prevent the user to move to next tab...
           e.stopPropagation();   

      };

      form.addClass('was-validated');  //until all required fields are filled out


       $('#' + $('.nav-item > .active').parent().next().find('a').attr('id')).tab('show');  //then the user can move to the next Tab

   })   


 </script>

Answer 1

我只能在第一个选项卡（第一个表单）上进行表单验证，但是我仍然无法在下一个选项卡（下一个表单）上进行验证。原因是我在第一个表单上进行验证后仍然无法获取当前表单。因此，现在，我仍在尝试找出如何随时获取当前表单，并将该表单用于表单验证。

 (function () {
        $('.btn-tab-prev').on('click', function (e) {
            e.preventDefault();
            $('#' + $('.nav-item > .active').parent().prev().find('a').attr('id')).tab('show');
        })
        var isFormValidated = true;

        $('.btn-tab-next').on('click', function (e) {

            // Fetch form to apply custom Bootstrap validation              
            var form = $('#' + $('.btn-tab-next').parent().find('form').attr('id'));



            if (form[0].checkValidity() === true) {

               e.preventDefault();
                $('#' + $('.nav-item > .active').parent().next().find('a').attr('id')).tab('show');
            };

            if (form[0].checkValidity() === false) {
                e.preventDefault();
                e.stopPropagation();
                isFormValidated = false;

            };
             form.addClass('was-validated');



            if (isFormValidated === false) {  //This block forces the page to stay on the validation first, before we can move to next page

                return;
            };

            if (isFormValidated === true) {
                alert("test 2");
                $('.btn-tab-next').addClass('enabled');
            };


        });

  })();

移至下一个选项卡之前，在“下一个”按钮上强制进行引导验证

1 个答案: