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

I am starting use Ruby on Rails and I am having a little problem. I have a form with 3 fields, this is the code:

我开始使用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 %>

In the email field when you write something that is not an email and try to submit, the browser (chrome or firefox ) display an error saying that the field must content an @. The same happen with the age field, if a letter is entered the browser show an error saying that the field only accept numbers.

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

I wanna know how to make that the browser show a message when any field is empty when you try to submit. I know how to do it in cakephp so I guess it can be done here in ruby too. I already validate the fields in the model, setting the presence in true but that only works for show a message after you submit and the page reload again.

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

4 个解决方案

#1

When you use something like:

当你使用类似的东西:

f.email_field

It is generating an HTML5 input element that tells the browser it has to be a valid email. HTML 5 also has a required='required' option that can be used to prevent blank fields.

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

You can add it like this:

您可以像这样添加它:

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

This will add required='required' to your form element. Note that in HTML5 you only need the word required in your form element, but the only way I know to add it in Rails is to use the option form I'm showing you here.

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

This will prevent submitting the form without that field. This works for current versions of Firefox, Chrome, Opera, and IE11. Safari will prevent the submission but doesn't indicate why. It just does nothing.

这将阻止在没有该字段的情况下提交表单。这适用于当前版本的Firefox,Chrome,Opera和IE11。 Safari将阻止提交但不表示原因。它什么都不做。

I would check this out: http://blueashes.com/2013/web-development/html5-form-validation-fallback/

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

#2

You can set the HTML required attribute to true. Just add required: true to each field.

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

Here's what your new form will look like:

这是您的新表单的样子:

<%= 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

Your case is pretty custom, that's why it looks pretty easy, but what you're really trying to achieve here is called 'client-side validation'.

你的情况非常自定义,这就是为什么它看起来很简单,但你真正想要实现的是“客户端验证”。

To be really portable and user-friendly it has to be done in JavaScript. Basically this will be a script that validates the fields and outputs the corresponding error messages to the user, preventing form submission at the same time. This is almost the same that Rails does on the server side when you submit the form.

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

Once the problem is defined, you can approach it in one of the following ways:

定义问题后,您可以通过以下方式之一进行处理:

Stay with Rails. Rails is initially designed to handle form validation on the server side. You can just accept the way it is, and it will yield the cleanest, shortest and the most semantic code possible. For it to be more seamless you can easily pull in some AJAX for it, which should be easy (http://guides.rubyonrails.org/working_with_javascript_in_rails.html). To user it'll look like nothing ever got submitted.

留在Rails。 Rails最初设计用于处理服务器端的表单验证。你可以接受它的方式,它将产生最干净,最短和最语义的代码。为了使它更加无缝,你可以轻松地为它添加一些AJAX,这应该很容易(http://guides.rubyonrails.org/working_with_javascript_in_rails.html)。对于用户来说,它看起来似乎没有提交任何内容。
Write some custom JS yourself to handle those validations. Either on your own, or with the aid of libraries like http://jqueryvalidation.org/. This is going to be a mess, since you'll basically have to duplicate Rails server-side validation code on the client-side in a different language. And keep it in sync.

自己编写一些自定义JS来处理这些验证。您可以自己,也可以借助http://jqueryvalidation.org/等图书馆。这将是一团糟,因为您基本上必须在客户端以不同的语言复制Rails服务器端验证代码。并保持同步。
Use one of the helper libraries for Rails. E.g. https://github.com/joecorcoran/judge looks promising, but there are others to be Googled. These guys exercise the same idea: you've got server-side validations and they should be easily usable on the client-side. Certain libraries generate JavaScript automatically, others just send the form to be validated to the server behind the scenes.

使用Rails的一个帮助程序库。例如。 https://github.com/joecorcoran/judge看起来很有前景,但还有其他人用Google搜索。这些人运用相同的想法:你已经获得了服务器端验证,并且它们应该可以在客户端轻松使用。某些库会自动生成JavaScript,其他库只是将要验证的表单发送到后台服务器。

If I were you, I would choose the 1st way + AJAX. Other ways would make simple matters unnecessarily complex, and instead of writing useful stuff you'll most certainly have to dive into debugging obscure JS and cryptic meta-programmed Ruby/Rails libraries.

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

Hope that helps!

希望有所帮助!

#4

HTML 5 has required=true option that can be used to prevent form submission with empty fields. In rails form helpers, you can use it like

HTML 5具有required = true选项,可用于防止使用空字段提交表单。在rails表单助手中,您可以像使用它一样使用它

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

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

#1