проверка формы: убедитесь, что выбраны несколько кнопок checbox и радио - PullRequest
Новая
       3

проверка формы: убедитесь, что выбраны несколько кнопок checbox и радио

0 голосов
/ 26 сентября 2019

Я строю форму с множеством условных путей .. например ..

  • Q1.a -> вызывает появление вопроса 3
  • Q1.b -> вызывает появление вопроса 2
  • Q1.c -> пропускает весь вопрос 16

Все вопросы требуются, если они видны пользователю формы,В таком случае я не могу просто вставить required во входные данные, если он не отображается.

Я применял свой "обязательный" класс таким образом 

    $('.question2-a').click(function() {
        $(".question3").toggle();           
        $(".question3").addClass("required"); 
        $(".question4").toggle();             
        $(".question4").addClass("required");
        $(".question5").toggle();             
        $(".question5").addClass("required");             
   });

   $('.question2-b').click(function() {       
        $(".question5").toggle();             
        $(".question5").addClass("required");             
    });

Таким образом, только те вопросы, которые мне известны, получают требуемый класс.

Теперь мне нужно просмотреть все требуемые входные данные и убедиться, что они были правильно выбраны.

Пока у меня есть это ... 

$('#PWLE').submit(function() {
   if ($('.required input:checkbox', this).is(':checked') && $('.required input:radio', this).is(':checked')) {
     // everything's fine...
   } 
   else {
     alert('Please fill out all required fields');
     return false;
   }
});

Это на самом деле не работает, потому что как только один флажок и радио выбраны, if удовлетворяется, и форма будетsubmit.

Есть ли способ, которым я могу перебрать свой класс required, чтобы убедиться, что логика операторов if работает на всех них?

Фрагмент HTML-формы 

<!-- Question #2 -->
<div class="form-group question2">
    <p><b><span class="req-notice">*</span>Have you received a newsletter in the past two years?</b></p>
    <div class="form-check question2-a">            
        <input class="form-check-input" type="radio" value="Yes" id="2261_9466_4_42752_1" name="2261_9466_4_42752">
        <label class="form-check-label" for="2261_9466_4_42752_1">
        Yes
        </label>
    </div>  
    <div class="form-check question2-b">            
        <input class="form-check-input" type="radio" value="No" id="2261_9466_4_42752_2" name="2261_9466_4_42752">
        <label class="form-check-label" for="2261_9466_4_42752_2">
        No
        </label>
    </div>            
</div>
<!-- End of Question #2 -->


 <!-- Question #3  -->
<div class="form-group question3">
    <p><b><span class="req-notice">*</span>When did you register for the  newsletter? (choose only ONE)</b></p>
    <div class="form-check">            
        <input class="form-check-input" type="radio" value="In the past 6 months" id="2261_9466_5_42753_1" name="2261_9466_5_42753">
        <label class="form-check-label" for="2261_9466_5_42753_1">
        In the past 6 months
       </label>
    </div>  
    <div class="form-check">            
        <input class="form-check-input" type="radio" value="Between 6 to 12 months" id="2261_9466_5_42753_2" name="2261_9466_5_42753">
        <label class="form-check-label" for="2261_9466_5_42753_2">
        Between 6 to 12 months
       </label>
    </div> 
    <div class="form-check">            
        <input class="form-check-input" type="radio" value="Between 1 to 2 years" id="2261_9466_5_42753_3" name="2261_9466_5_42753">
        <label class="form-check-label" for="2261_9466_5_42753_3">
        Between 1 to 2 years
        </label>
    </div>  
    <div class="form-check">            
        <input class="form-check-input" type="radio" value="More than 2 years" id="2261_9466_5_42753_4" name="2261_9466_5_42753">
        <label class="form-check-label" for="2261_9466_5_42753_4">
        More than 2 years
        </label>
    </div>         
</div>
<!-- End of Question #3 -->

1 Ответ

1 голос
/ 26 сентября 2019 
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
    $(".q1.required").click(function(){
      if(this.value == "yes"){
        $("#div3").show();
        $("#div3 :input").prop('required',true);
      }
      else{
        $("#div3").hide();
        $("#div3 :input").prop('required',false);
      }
  });
  });
  </script>
</head>
<body>
  <form action="" method="">
    <div id="div1">
    <label><b>Question 1</b></label>
    <input  name="q1" class = "q1 required" type="radio" value = "yes" required>
    <input  name="q1" class = "q1 required" type="radio" value = "no" required>
    <br>
  </div>
  <div id="div2">
    <label><b>Question 2</b></label>
    <input id="q2" name="q2" class = "required" type="radio" value = "no" required>
    <input id="q2" name="q2" class = "required" type="radio" value = "yes" required>
    <br>
  </div>
  <div id = "div3" style="display:none;">
    <label><b>Question 3</b></label>
    <input id="q3" name="q3" class = "" type="radio" value = "yes">
    <input id="q3" name="q3" class = "" type="radio" value = "no">
    <br>
  </div>
  <button>Submit</button>
  </form>
</body>
</html>
  • Вы можете использовать атрибут required вместо класса для включения автоматической проверки при нажатии кнопки отправки / отправки.
  • Оставьте класс "обязательным" только для запуска события нажатия.

См. Код выше:

  1. Я отобразил 2 вопроса, и при нажатии «да» первого вопроса я отобразил третий вопрос и установил атрибут ввода как requiredа затем, если вы нажмете «нет», я скрываю вопрос и удаляю атрибут «required».

Этот код является рабочим примером, не стесняйтесь его запускать и проверять.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...