如何在提交表格之前检查所有单选按钮/复选框

Question

我已经使用form_tag来构建表单，其中显示问题和答案供用户查看。这是我的表格：

<%= form_tag({ controller: 'exams', action: 'check_results' }, authenticity_token: true) do %> 
    <ol class="questions"> 
    <% @questions.each do |question| %> 
    <li class="content_question"><%= kramdown question.content %></li> 

    <ol class="answers"> 
    <% question.answers.shuffle.each do |answer| %> 
     <table class="answer_contents"> 
     <tbody> 
     <tr> 
     <% if question.question_type.shorcut == 'MC' %> 
      <td><%= check_box_tag "user_answer_ids[#{question.id}][]", answer.id, false, id: "user_answer_ids_#{answer.id}" %></td> 
      <td><li></li></td> 
      <td><%= label_tag "user_answer_ids_#{answer.id}", kramdown(answer.content) %></td> 
     <% else %> 
      <td><%= radio_button_tag "user_answer_ids[#{question.id}][]", answer.id, false, id: "user_answer_ids_#{answer.id}" %></td> 
      <td><li></li></td> 
      <td><%= label_tag "user_answer_ids_#{answer.id}", kramdown(answer.content) %></td> 
     <% end %> 
     </tr> 
     </tbody> 
     </table> 
    <% end %> <%# question.answers %> 
    </ol> <%# ol.answers %> 
    <br> 
    <% end %> <%# @questions %> 
    </ol> <%# ol.questions %> 
    <%= submit_tag "Finish Exam", disable_with: "Checking results...", confirm: "Are you sure?", class: "btn btn-primary" %> 
<% end %> <%# form_tag %> 

我要检查，如果用户忘记检查一些问题，当他们按下提交，它将对用户警报检查错过的问题。任何人都可以帮助/指导我如何使用JavaScript或jQuery来做到这一点？谢谢。

HTML代码生成

这是一个问题，它的答案HTML，无线电选择。与复选框，它有不同的是，有更多的table元素和type在input是复选框而不是无线电。

<li class="content_question"><p>What is the term used to describe a framework of the phase involved in developing information systems?</p> 
</li> 
<ol class="answers"> 
    <table class="answer_contents"> 
    <tbody> 
     <tr> 
     <td><input id="user_answer_ids_663" name="user_answer_ids[186][]" type="radio" value="663"></td> 
     <td><li></li></td> 
     <td><label for="user_answer_ids_663"><p>systems development life cycle (t)</p></label></td> 
     </tr> 
    </tbody> 
    </table> 
    <table class="answer_contents"> 
    <tbody> 
     <tr> 
     <td><input id="user_answer_ids_664" name="user_answer_ids[186][]" type="radio" value="664"></td> 
     <td><li></li></td> 
     <td><label for="user_answer_ids_664"><p>extreme programing</p></label></td> 
     </tr> 
    </tbody> 
    </table> 
    <table class="answer_contents"> 
    <tbody> 
     <tr> 
     <td><input id="user_answer_ids_665" name="user_answer_ids[186][]" type="radio" value="665"></td> 
     <td><li></li></td> 
     <td><label for="user_answer_ids_665"><p>rapid application development</p></label></td> 
     </tr> 
    </tbody> 
    </table> 
    <table class="answer_contents"> 
    <tbody> 
     <tr> 
     <td><input id="user_answer_ids_666" name="user_answer_ids[186][]" type="radio" value="666"></td> 
     <td><li></li></td> 
     <td><label for="user_answer_ids_666"><p>predictive life cycle</p></label></td> 
     </tr> 
    </tbody> 
    </table> 
</ol> 

Answer 1

下面的例子处理程序添加到的，所以你需要给你的形式ID myForm提交事件的形式myForm。这会检查每个问题是否有可能的答案。它适用于广播和复选框的答案。如果验证失败，它会提示缺少答案的问题列表，然后阻止表单提交。

$(document).ready(function(){ 
    $('#myForm').submit(function(){ 

     var errors = []; 

     $('.content_question').each(function(){ 

      var answerCont = $(this).next(); 
      var inputs = $(answerCont).find('input[type=radio], input[type=checkbox]'); 

      if(inputs.length > 0) 
      { 
       var groupChecked = false; 

       $(inputs).each(function(){ 
        if($(this).is(':checked')) 
        { 
         groupChecked = true; 
        } 
       }); 

       if(!groupChecked) 
       { 
        errors.push($(this).text().trim()); 
       } 
      } 
     }); 

     if(errors.length > 0) 
     { 
      var errorMessage = "You missed " + errors.length + " questions: \n\n"; 

      for(var i=0; i<errors.length; i++) 
      { 
       errorMessage += errors[i] + "\n"; 
      } 
      alert(errorMessage); 
      return false; 
     } 
    }); 
});