当用户错误填写表格/遗漏某些内容时，如何通过 JS on ruby on rails 显示错误消息？答案

【问题标题】：When a user fills a form wrongly/misses something how do I show an error message through JS on ruby on rails?当用户错误填写表格/遗漏某些内容时，如何通过 JS on ruby on rails 显示错误消息？
【发布时间】：2016-07-18 09:47:15
【问题描述】：

我的应用中有一个表单（标准填写姓名、姓氏、电子邮件），我想知道如果用户错过了一个部分/没有正确填写它，如何显示错误消息。我的验证是这些部分都不能是空白的。我主要不确定如何将控制器连接到我的 JS 文件以调用错误消息，或者是否有更好的方法。

我的 HTML：

    <%= form_for @contestant, :html => {:multipart => true} do |f| %>
                            <div class="form-group">
                                <label for="name">Name:</label>
                                <input type="name" class="form-control" id="name" placeholder="Name">
                            </div>
                            <div class="form-group">
                                <label for="surname">Surname:</label>
                                <input type="surname" class="form-control" id="surname" placeholder="Surname">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="example@gmail.com">
                            </div>
<% end %>

这是控制器：

   class ContestantsController < ApplicationController
    def new 
        @contestant = Contestant.new 
    end 
    def create 
        @contestant = Contestant.new(contestant_params)
        if @contestant.errors.any?
            #I don't know how to connect with the JS section?
        else
            #I don't know how to connect with the JS section?
        end
    end 
    private 
    def contestant_params 
        params.require(:contestant).permit(:name, :surname, :email)
    end 
   end

非常感谢您的帮助

【问题讨论】：

标签： javascript ruby-on-rails forms

【解决方案1】：

有几种方法可以解决这个问题。

做一些基本的客户端验证检查，例如检查必填字段、必填格式等。这将是您项目的 assets/javascripts 文件夹中的一个 js 文件。但是，您也应该在后端执行验证。

另一种方法是使用 ajax 提交表单。只需将 remote: true 添加到 form_for 行

<%= form_for @contestant, :remote => true, :html => {:multipart => true} do |f| %>

在控制器中，您将需要一个 respond_to 块来处理 ajax 请求。

respond_to do |format|
  if @contestant.save
    format.html { redirect_to @contestant, notice: 'Contestant could not be created.' }
    format.js   {}
    format.json { render json: @contestant}
  else
    format.html { render action: "new" }
    format.json { render json: @contestant.errors }
  end
end

有很多信息here。

【讨论】：

【解决方案2】：

在 Rails 中，您可以使用 client_side_validation gem，它将选择模型验证并将其应用于前端验证。

在您的 Gemfile 中包含 ClientSideValidations

gem 'client_side_validations'

然后运行安装生成器

rails g client_side_validations:install

将此添加到 application.js

//= require rails.validations

并使用表单作为

<%= form_for @user, validate: true do |f| %>

这将为您管理客户端验证。这是 gem github 页面的链接，您可以查看更多选项client_side_validation_rails

【讨论】：

【解决方案3】：

在 Rails 中，您使用 ActiveModel::Validators 来验证您的模型。

所以你的代码应该是这样的：

class Contestant
  validates_presence_of :name, :surname, :email
end

现在在您的控制器中执行以下操作：

def create 
    @contestant = Contestant.new(contestant_params)
    if @contestant.save
      redirect_to @contestant
    else
      render :new
    end
end

在你看来：

<%= form_for @contestant %>
  <% if @contestant.errors.any? %>
    <div id="error_explanation">
      <ul>
      <% @contestant.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
<% end %>

对于像 presence 这样的简单验证，您可能不想使用任何 gem 或 javascript 代码，一种方法是在所需属性上设置 html 属性 required=true。

【讨论】：