提交表單前如何測試所有單選按鈕/復選框

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

下面的示例將處理程序添加到表單myForm事件中，因此您需要為表單賦予ID 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;
        }
    });
});