Javascript/jQuery - フォームに必要なコメントの最小数を確認する

Question

質問ごとに質問があるテーブル（<select>要素から選択）とコメント（<textarea>要素）があります。すべての質問が必要ですが、私は提出するために記入したコメントの数だけ欲しいです。私はSQLiteのテーブルからコメントと質問入力を生成していますので、requireをどこにでも置くことはできません。解決方法は、JavascriptコードまたはRuby ERBのいずれかにすることができます。

私は何とか解決策に使用できると確信する質問とコメントのカウンターがあります。私はかなりJavascriptを新しく、それを動作させる方法がわからない。

これは、この機能を実装で私の試みです：

<table class="sortable"> 
    <tr> 
    <th></th> 
    </tr> 

<% data.each.with_index do |data,index|%> 
<%if data[0] >= 6 && data[0] <= 20%> 
    <tr> 
    <td><%=data[1]%></td><td><select name="<%=index%>"> 
     <option value=""></option> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
     <option value="na">N/a</option> 
    </select> 

<div class="accordion">Comment</div> 
    <div class="panel"> 
    <textarea class="comments" name="comment<%=index%>" rows="4" cols="15"></textarea> 
    </div> 
    </td> 
    </tr> 
<% end %> 
<% end %> 
</table> 

$('select').change(function() { 
// get all selects 
var allSelects = $('select'); 

    // set values count by type 
//var yes = 0; 
//var no = 0; 
// var na = 0; 
var total = 0; 

// for each select increase count 
$.each(allSelects, function(i, s) { 
    // increase count 
    if($(s).val() == 'Yes') { total++; } 
    if($(s).val() == 'No') { total++; } 
    if($(s).val() == 'na') { total++; } 
}); 

// update count values summary 
$('.cnt-yes').text(yes); 
$('.cnt-no').text(no); 
$('.cnt-na').text(na); 
$('.cnt-total').text(total); 
if (total > 19) { 
alert('You have completed this ......') 

}; 

var commentstotal = 0; 
$('select').change(function() { 

$('.comment-total').text(commentstotal); 

}); 

$(".comments").on("blur", function(){ 
$(this).val() ? commentstotal++ : commentstotal--; 
$('.comment-total').text(commentstotal); 
}) 

Answer 1

HTMLとJavascriptはあなたが何を望むかにかなり近かった、とわずかな変更が本当に必要とされました。欠落していた要素がいくつかあり、可読性と一貫性を高めるためにいくつかの再フォーマットが行われました。 Form comment validationと名付けられたこのjsFiddleは、その解決策を示しています。

HTMLコード（これは<form>要素内に存在すると仮定）：

• テーブルヘッダ
• ため<th>要素の使用を修正：これは、これらの変更を含む

  <table class="sortable"> 
      <th> 
      <td></td> 
      </th> 
  
  <% data.each.with_index do |data,index| %> 
      <% if data[0] >= 6 && data[0] <= 20 %> 
      <tr> 
       <td> 
       <%=data[1]%></td><td><select name="<%=index%>"> 
        <option value=""></option> 
        <option value="Yes">Yes</option> 
        <option value="No">No</option> 
        <option value="na">N/A</option> 
       </select> 
  
       <div class="accordion">Comment</div> 
        <div class="panel"> 
        <textarea class="comments" name="comment<%=index%>" rows="4" cols="15"></textarea> 
       </div> 
       </td> 
      </tr> 
      <% end %> 
  <% end %> 
  </table> 
  
  <fieldset> 
      <legend>Totals</legend> 
      <p>Yes choices: <span id="cnt-yes"></span></p> 
      <p>No choices: <span id="cnt-no"></span></p> 
      <p>N/A choices: <span id="cnt-na"></span></p> 
      <p>Total choices: <span id="cnt-total"></span></p> 
      <p>Comments: <span id="comment-total"></span></p> 
      <p>Progress: <span id="progress-message"></span></p> 
  </fieldset> 
  
  <input type="submit" value="Submit!"> 
  

  カウントと進捗状況メッセージを格納する<fieldset>を追加

• submitボタンの有効/無効機能に

を証明するためにJavascriptコード：

• jQueryのセレクタがキャッシュにスクリプトの先頭に移動：

  var submit = $("input[type='submit']"); // Submit button (to enable/disable dynamically) 
  var allSelects = $("select"); 
  var cnt_yes = $("#cnt-yes"); 
  var cnt_no = $("#cnt-no"); 
  var cnt_na = $("#cnt-na"); 
  var cnt_total = $("#cnt-total"); 
  var progress_message = $("#progress-message"); 
  var allComments = $(".comments"); 
  var comment_total = $("#comment-total");  
  
  var comments_required = 1; // <== Change this to set the number of comments required 
  var comment_minimum_length = 8; // <== Change this to set the minimum accepted length of a comment 
  
  function process_choice() { 
      // get all selects 
  
      // set values count by type 
      var count_yes = 0; 
      var count_no = 0; 
      var count_na = 0; 
      var count_total = 0; 
      var count_comments = 0; 
      var complete = true; 
  
      // for each select increase count 
      $.each(allSelects, function(i, s) { 
       // increase count 
       switch ($(s).val()) { 
       case "Yes": 
        ++count_yes; 
        break; 
       case "No": 
        ++count_no; 
        break; 
       case "na": 
        ++count_na; 
        break; 
       default: 
        complete = false; 
        break; 
       } 
      }); 
  
      count_total = count_yes + count_no + count_na; 
  
      $.each(allComments, function() { 
       count_comments += $(this).val().length >= comment_minimum_length ? 1 : 0; 
      }); 
  
      // update count values summary 
      cnt_yes.text(count_yes); 
      cnt_no.text(count_no); 
      cnt_na.text(count_na); 
      cnt_total.text(count_total); 
      comment_total.text(count_comments); 
  
      if (count_comments < comments_required) { 
       var count_remaining = comments_required-count_comments 
       $("#progress-message").text("Only " + count_remaining + " choice" + (count_remaining > 1 ? "s" : "") + " left to complete."); 
       complete = false; 
      } else { 
       $("#progress-message").text("The required number of comments has been satisfied."); 
      } 
  
      if (complete) { 
       submit.removeProp("disabled"); 
      } else { 
       submit.prop("disabled","disabled"); 
      } 
  }; 
  
  allSelects.change(process_choice); 
  allComments.blur(process_choice); 
  
  process_choice(); 
  

  更新Javascriptがこれらの変更を含み結果（このような静的HTMLの方が好ましい）

• は、以前の匿名のイベントコールバック関数をiniの名前付き関数にしましたオプションが与えられた選択肢のために相互に排他的であるようtialization目的
• コメントを外します（最後の項目を参照）とカウントを更新する方法を示すためにyes、no、およびna変数の名前を変更し、動的に
• は、switchステートメントにif..if..ifを変更しました
は
• コメントの最小受け入れ長チェックを追加し、その後の使用のためにcount_totalに個々の合計を加え
• WHEに基づいて、フォームがcompleteされているかどうかの追跡を添加THERすべての選択肢とコメントの最小数は
• が残っているコメントの数を含めるように進捗メッセージを更新し、新たな<fieldset>表示
• に<span>要素の合計を更新または必要条件が満たされたと判断されている
選択肢が選択されていないですか、あまりにもいくつかのコメントが
• を作ってきたときsubmitボタンが有効/無効
• はなるように変更イベント
• のための新しい名前の関数は、ページの状態を初期化するために、起動時に新しい名前の関数を呼び出し登録しましたページ統計eは最初から同期していることが保証されています