在 ruby​​ on rails 中验证 form_tag

Question

我正在研究 Ruby 2 和 Rails 4。我想在 Rails 的 form_tag 中添加 html 验证“必需”。我的代码如下。

<%= form_tag file_download_contacts_path, :method => :post, :id => 'contact-form', :class => 'special'  do |f| %>     
   <div><%=  label_tag :Name  %><br />
        <%= text_field_tag "contact[name]" , nil, placeholder: "Your Name" %></div>
    <div><%=  label_tag :Email %><br />
        <%= email_field_tag "contact[email]" , nil, placeholder: "your@mail.com" %></div>
    <div><%=  label_tag :Mobile %><br />
        <%= telephone_field_tag "contact[phone]" , nil, placeholder: "Your Contact No" %></div>
    <div><br /><%= button_tag 'Submit' %></div>  

  <% end %>

单击提交按钮，它会直接转到 file_download_contacts_path 页面，尽管文本区域为空白。 我怎样才能防止这种情况？ 在 Html 中，我们可以使用“必需”。 如果任何机构可以，请帮助我。 谢谢你。

Answer 1

Rails 在提交之前不能进行任何表单验证，因为验证需要在客户端进行（而 Rails 当然是服务器端）。 你需要使用javascript。 如果你用谷歌搜索“javascript 表单验证”，你会看到大量的信息。

jQuery 是一个非常流行的 javascript 库，它有各种表单验证插件，谷歌看看。

Answer 2

像这样的东西应该可以帮助你

$(document).ready(function () {
$(“#contact-form”).validate({
debug: true,
rules: {
“contact[email]“: {required: true, email: true},
“contact[name]“: {required: true, name: true},
“contact[phone]“: {required: true, phone: true}
}
});
});

来源

Answer 3

注意：以上答案都是正确和完美的，并带有简单的解释，但如果您想向用户显示实际的错误消息（如果您想进行复杂的验证），那么下面的答案适合您，

在我的场景中，我的表单中有两个复选框，我想验证至少应该单击一个复选框，如果没有，我将向用户显示一条错误消息。

<%= form_tag( add_to_telegram_path, method: :post, id: 'add-to-telegram-form') do |t| %>
  Select channel
  <%= check_box_tag "channel_names[]", id: 'channel_1'%> Channel 1
  <%= check_box_tag "channel_names[]", id: 'channel_2'%> Channel 2
  <%= button_tag "Send", :class => 'btn btn-success', id: 'add-to-telegram-btn', onclick: "validTelegram()" %>
<%end%>

然后在JS中，

function validTelegram() {
  event.preventDefault();
  var checkboxes = Array.from(document.getElementsByName("channel_names[]"));
  if(checkboxes.reduce((acc, curr) => acc || curr.checked, false)){
    $('#add-to-telegram-form').submit();
  } else {
    //swal('Error','Please select atleast one channel!','warning');
    alert('Some error!')
  }
}

• 我在form_tag的提交点击上调用了一个 JS 函数，（如果你使用的是sibmit_tag用button_tag替换它）
• 我阻止了提交按钮的默认行为
• 然后我开始通过其 Id/Class 或 Name 获取元素，并检查我想在 JS 中做什么，然后基于我的验证要么我在表单 ID 上调用 submit()，要么显示错误信息。

注意：为了显示错误消息，我使用了 Sweet alert，你可以坚持使用 alert();，但如果你正在寻找更好的 UI，那么在 JS 中取消我的 swal() 代码注释并注释掉 alert(); 您可以阅读有关Sweet Alert PopUp 的更多信息