Ruby on Rails：验证用户是否选择了复选框答案

【问题标题】：Ruby on Rails: Validate a user has selected a checkboxRuby on Rails：验证用户是否选择了复选框
【发布时间】：2017-02-18 12:20:14
【问题描述】：

在我的 RoR 应用程序中，我有一个记录表，每条记录都有一个复选框，以便用户可以选择和删除多条记录。

这通过以下代码起作用。

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
    <thead>
        <tr>
            <th></th>
            <th>First name</th>
            <th>Surname</th>
            <th>Email</th>
            <th>Subscription</th>
            <th>Emails Received</th>
            <th colspan=3>Available Actions</th>
        </tr>
    </thead>
    <%= form_tag destroy_multiple_contacts_path, method: :delete do %>
    <tbody>
        <% @contacts.each do |contact| %>
            <tr class="odd gradeX">
                <td><%= check_box_tag "contact_ids[]", contact.id %></td>
                <td><%= contact.firstname %></td>
                <td><%= contact.surname %></td>
                <td><%= contact.email %></td>
                <td><%= human_boolean(contact.subscription) %></td>
                <td><%= contact.recipients.count %></td>
                <td><%= link_to 'Show', contact_path(contact) %></td>
                <td><%= link_to 'Edit', edit_contact_path(contact) %></td>
                <td><%= link_to 'Destroy', contact_path(contact), method: :delete, data: { confirm: 'Are you sure?' } %></td>
            </tr>
        <% end %>
    </tbody>
</table>

    <%= submit_tag "Delete Selected", {:class => "btn btn-danger btn-sm" } %>
<% end %>

控制器：

def destroy_multiple
    Contact.destroy(params[:contact_ids])
    redirect_to contacts_path
end

路线：

resources :contacts do
  collection do
     delete 'destroy_multiple'
  end
end

然而，这缺乏验证，用户目前可以在没有选中任何复选框的情况下单击删除按钮 - 这会导致系统出错。

如果用户在未选中复选框的情况下单击删除，是否可以显示错误消息，或者仅允许用户在选中复选框时单击删除？

【问题讨论】：

@KevalGohil 并提出了可能是最简单和最快的解决方案。您可能会更喜欢使用 java 脚本，但我建议将东西放入控制器中可能更容易且更快。

标签： javascript ruby-on-rails ruby ruby-on-rails-4 checkbox

【解决方案1】：

您可以使用闪信

在控制器中做

def destroy_multiple
   if params[:contact_ids].blank?
       flash[:notice] = "No contacts selected"
       redirect_to :back
   else 
      Contact.destroy(params[:contact_ids])
      redirect_to contacts_path
   end
end

在视图中添加上表

<% if flash[:notice] %>
    <div class="notice"><%= flash[:notice] %></div>
<% end %>

【讨论】：

【解决方案2】：

我建议您使用 javascript 标记这篇文章时想到的一些 javascript 方法

禁用删除按钮，只有在选中复选框后才启用它。这将需要为每个复选框添加一个 eventListener，以检查每次用户与复选框交互时是否勾选了任何复选框，然后适当地启用/禁用按钮。
向启用按钮添加事件侦听器。提交时，请确保至少选中一个复选框，或者不提交表单并显示适当的消息。

这是第二种方法的基本实现

$(function() {

  function noContactSelected(){
    var checkboxes = Array.from(document.querySelectorAll('input[type=checkbox]'));
    var checked = checkboxes.filter(function(checkbox) { return checkbox.checked})
    return checked.length == 0;
  }

  function showNoneCheckedMsg(){
    var message = document.createTextNode('Please check at least one contact');
    document.querySelector('.error').appendChild(message);
  }

  $(".btn").click(function(event){
    if (noContactSelected()){
      event.preventDefault();
      showNoneCheckedMsg();
    }
  });

});

在视图中，您需要使用 class="error" 包含一个 p 或 div 元素

如果用户没有启用 javascript，我们始终建议您实施服务器端验证，Keval Gohil 的回答解决了这些问题。

【讨论】：