Javascript / jQuery - 验证表单所需的最少评论数

Question

我有一个表格，其中包含每个问题的一些问题（通过 <select> 元素选择）和 cmets（在 <textarea> 元素中）。所有问题都是必需的，但我只想填写一定数量的 cmets 以便提交。我正在从 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> 元素中）：

<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!">

这包括以下更改：

• 更正了表头中 <th> 元素的使用
• 添加了 <fieldset> 来存放计数和进度消息
• 添加了submit 按钮来演示启用/禁用功能

Javascript 代码：

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 包括以下更改：

• jQuery 选择器移动到脚本的顶部以缓存结果（这种静态 HTML 的首选）
• 将之前匿名的事件回调函数变成一个命名函数用于初始化（见最后一项）
• 取消注释并重命名 yes、no 和 na 变量以演示如何动态更新计数
• 将 if..if..if 更改为 switch 语句，因为选项对于给定的选择是互斥的
• 将各个总数添加到count_total 以供后续使用
• 为 cmets 添加了可接受的最小长度检查
• 添加了对表单是否为 complete 的跟踪，基于是否已做出所有选择和最小 cmets 数
• 在新的<fieldset> 显示中更新了<span> 元素的总数
• 更新了进度消息以包含剩余 cmets 的数量或已满足要求
• 在未选择选项或进行的 cmets 太少时启用/禁用 submit 按钮
• 为更改事件注册了新的命名函数
• 在启动时调用新的命名函数来初始化页面的状态，从而保证页面状态从一开始就同步