在 ruby on rails 中验证 form_tag答案

【问题标题】：validation for form_tag in ruby on rails在 ruby on rails 中验证 form_tag
【发布时间】：2014-05-14 10:09:08
【问题描述】：

我正在研究 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 中，我们可以使用“必需”。如果有任何机构可以，请帮助我。谢谢。

【问题讨论】：

实际上是的，这将比 javascript 表单验证简单得多，这就是我认为您要问的问题。 :)
模型联系人在其控制器中还有一个新的和创建操作。所以当 validates_presence_of :name , :email, :phone 失败时，它会被重定向到新的操作（页面），而我希望它在 file_download 操作中
那么你想要一个 Jqery 表单验证？

标签： ruby-on-rails html ruby-on-rails-4

【解决方案1】：

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

$(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}
}
});
});

Source

【讨论】：

感谢您的代码。现在 jquery 正在工作，但单击提交按钮它不会重定向到另一个页面。我在 assets/javascript 文件夹中添加了 jquery.validate.js 和 jquery.validate.min.js。
@Priyanko 如果出现验证错误，它不会重定向。确保填写所有必填字段。
是的，我填写了所有必填字段。没有错误。但是点击按钮并没有做任何事情。
@Priyanko 将其发布为不同的问题并详细解释。然后我会在那里提供帮助！
是的，我已经发布了。链接：stackoverflow.com/questions/23670385/…

【解决方案2】：

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

jQuery是一个非常流行的javascript库，里面有各种表单验证插件，google一下看看。

【讨论】：

【解决方案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 或名称获取元素，并检查了我想在 JS 中执行的操作，然后根据我的验证，要么我在表单 ID 上调用 submit()，要么显示错误消息。

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

【讨论】：