javascript - 当用户错误填写表单/遗漏某些内容时，如何通过 ruby​​ on Rails 上的 JS 显示错误消息？

Question

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

这是 Controller :

   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

一些帮助将不胜感激

Answer 1

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

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

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

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

   在 Controller 中，您需要一个 respond_to block 来处理 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 .