Принудительная проверка начальной загрузки на кнопке «Далее» перед переходом на следующую вкладку - PullRequest
Новая
       20

Принудительная проверка начальной загрузки на кнопке «Далее» перед переходом на следующую вкладку

0 голосов
/ 10 октября 2018

Я хотел бы заставить пользователя заполнить все необходимые поля в текущей форме, прежде чем перейти к следующей вкладке, нажав кнопку «Далее».Я использую форму Bootstrap Validation.Каждая «следующая» кнопка содержится в своей собственной форме.Проблемы, с которыми я сталкиваюсь, следующие:

1 - даже если обязательные поля в текущей форме еще не заполнены, нажатие кнопки «СЛЕДУЮЩАЯ» переходит к следующей вкладке, даже если проверка формы не удалась,Это означает, что event.preventDefault () и event.stopPropagation () не мешают пользователю перейти к следующей вкладке.Чтобы попытаться решить эту проблему, я поместил код внутри $ (document) .ready (function () , когда я где-то читал, что это решит проблему, но это не так.

2- Оказавшись на следующей вкладке, я все еще не могу взять текущую форму внутри переменной, которую я называю «формой». По некоторым причинам форма переменной содержит только самую первую форму, даже после перехода на следующую вкладку.

Может ли кто-нибудь указать мне правильное направление? Ниже приведен фрагмент моего 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>

1 Ответ

0 голосов
/ 15 октября 2018

Я могу выполнить проверку формы только на первой вкладке (первая форма), но я все еще не могу выполнить проверку на следующей вкладке (следующая форма).Причина в том, что я все еще не могу получить текущую форму после того, как я проверил самую первую форму.Поэтому сейчас я все еще пытаюсь выяснить, как получить текущую форму в любое время и использовать эту форму для проверки формы. 

 (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');
            };


        });

  })();
...