不允许用户在 ruby​​ on rails 中提交带有空字段的表单

Posted 2023-02-21

【中文标题】不允许用户在 ruby​​ on rails 中提交带有空字段的表单

【英文标题】：Don't allow user to submit a form with empty fields in ruby on rails

【发布时间】：2015-07-24 04:31:40

【问题描述】：

我开始使用 Ruby on Rails，但遇到了一个小问题。我有一个包含 3 个字段的表单，这是代码：

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div class="field">
    <%= f.text_field :name, autofocus: true, placeholder: "Name" %>
  </div>

  <div class="field">
    <%= f.email_field :email, autofocus: true, placeholder: "Email" %>
  </div>

  <div class="field">
    <%= f.number_field :age, autofocus: true, placeholder: "Age" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

在电子邮件字段中，当您编写不是电子邮件的内容并尝试提交时，浏览器（chrome 或 firefox）会显示错误，指出该字段必须包含 @。年龄字段也是如此，如果输入一个字母，浏览器会显示错误，指出该字段只接受数字。

我想知道如何让浏览器在您尝试提交时在任何字段为空时显示一条消息。我知道如何在 cakephp 中做到这一点，所以我想它也可以在 ruby​​ 中完成。我已经验证了模型中的字段，将存在设置为 true，但这仅适用于在您提交并重新加载页面后显示消息。

【参考方案1】：

当你使用类似的东西时：

f.email_field

它正在生成一个 html5 输入元素，告诉浏览器它必须是一封有效的电子邮件。 HTML 5 还有一个required='required' 选项，可用于防止出现空白字段。

你可以这样添加：

<div class="field">
  <%= f.email_field :email, autofocus: true, placeholder: "Email", :required => 'required' %>
</div>

这会将required='required' 添加到您的表单元素中。请注意，在 HTML5 中，您只需要在表单元素中添加单词 required，但我知道在 Rails 中添加它的唯一方法是使用我在这里向您展示的选项表单。

这将阻止提交没有该字段的表单。这适用于当前版本的 Firefox、Chrome、Opera 和 IE11。 Safari 将阻止提交，但没有说明原因。它什么也不做。

我会检查一下：http://blueashes.com/2013/web-development/html5-form-validation-fallback/

【讨论】：

如下所述，您也可以使用另一种形式的required: true，任何一种都可以。

【参考方案2】：

您可以将 HTML required 属性设置为 true。只需将required: true 添加到每个字段即可。

您的新表单如下所示：

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div class="field">
    <%= f.text_field :name, required: true, autofocus: true, placeholder: "Name" %>
  </div>

  <div class="field">
    <%= f.email_field :email, required: true, autofocus: true, placeholder: "Email" %>
  </div>

  <div class="field">
    <%= f.number_field :age, required: true, autofocus: true, placeholder: "Age" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

【参考方案3】：

您的案例非常定制，这就是为什么它看起来很简单，但您在这里真正想要实现的是所谓的“客户端验证”。

要真正便携和用户友好，它必须在 javascript 中完成。基本上，这将是一个验证字段并向用户输出相应错误消息的脚本，同时阻止表单提交。这与 Rails 在服务器端提交表单时所做的几乎相同。

一旦定义了问题，您可以通过以下方式之一解决它：

继续使用 Rails。 Rails 最初设计用于在服务器端处理表单验证。你可以接受它的方式，它会产生尽可能干净、最短和最语义化的代码。为了使其更加无缝，您可以轻松地为其引入一些 AJAX，这应该很容易 (http://guides.rubyonrails.org/working_with_javascript_in_rails.html)。对用户来说，它看起来就像什么都没有提交。

自己编写一些自定义 JS 来处理这些验证。无论是您自己，还是借助 http://jqueryvalidation.org/ 等库。这将是一团糟，因为您基本上必须在客户端以不同的语言复制 Rails 服务器端验证代码。并保持同步。

使用 Rails 的帮助程序库之一。例如。 https://github.com/joecorcoran/judge 看起来很有希望，但还有其他的需要谷歌搜索。这些人的想法是一样的：你有服务器端的验证，它们应该很容易在客户端使用。某些库会自动生成 JavaScript，而其他库只是将要验证的表单发送到幕后的服务器。

如果我是你，我会选择第一种方式 + AJAX。其他方法会使简单的事情变得不必要地复杂，而不是编写有用的东西，你肯定不得不深入调试晦涩的 JS 和神秘的元编程 Ruby/Rails 库。

希望有帮助！

【参考方案4】：

HTML 5 有 required=true 选项，可用于防止表单提交为空字段。在 Rails 表单助手中，你可以像这样使用它

<%= f.text_field :first_name, required: true %>

<%= f.email_field :email, required: true %>