1

私は以前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コード

これは、ラジオ選択を使用した1つの質問とその回答の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>
4

1 に答える 1

1

次の例では、フォームの送信イベントにハンドラーを追加しているmyFormため、フォームにIDを指定する必要がありますmyForm。これにより、各質問で可能な回答の1つがチェックされていることが確認されます。ラジオとチェックボックスの両方の回答で機能します。検証が失敗すると、回答が欠落している質問のリストにアラートが表示され、フォームが送信されなくなります。

$(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;
        }
    });
});
于 2012-12-10T13:11:52.733 に答える