当用户错误地填写表单/遗漏了一些内容时，我如何通过ruby on rails上的JS显示错误消息

When a user fills a form wrongly/misses something how do I show an error message through JS on ruby on rails?

本文关键字：错误 何通过 ruby rails 显示 消息 JS 上的 on 表单 用户      更新时间：2023-09-26

我的应用程序中有一个表单（标准填写姓名、姓氏、电子邮件），我想知道如果用户错过了一个部分/没有正确填写，如何显示错误消息。我的验证是，这些部分都不能是空白的。我主要不确定如何将控制器连接到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

非常感谢您的帮助

有几种方法可以实现这一点。

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

  2. 另一种方法是使用ajax提交表单。只需在表单的行中添加remote:true

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

    在控制器中，您将需要一个respons_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

这里有很多信息。

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

在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

在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。

相关文章：