代码之家 › 专栏 › 技术社区 › Santosh Aryal

带有显示内联错误消息的Rails窗体

ruby-on-rails-5 ajax json ruby-on-rails

Santosh Aryal · 技术社区 · 6 年前

我正试图在Rails应用程序中的表单元素下面直接显示错误消息。

我做了以下工作。

控制器

def create
    @faculty = Faculty.new(faculty_params)
    respond_to do |format|
        if @faculty.save
            format.html { redirect_to admin_faculties_path, notice: 'Faculty was successfully created.'}
            format.json {render json: @faculty, status: :created, location: @faculty}
        else
            format.html {render '_form'}
            format.json {render json: @faculty.errors, status: :unprocessable_entity }
        end
    end
end

形式

    <% form_with(model: [:admin, @faculty]) do |f| %>
<div class="card-title">Add Faculty</div>
    <div class="form-group">
        <%= f.label :faculty_name, class: "form-label" do %>
        Faculty Name <span class="form-required">*</span>
        <% end %>
        <%= f.text_field :faculty_name, class: "form-control", placeholder: "Faculty Name", required: true %>
    </div>
<%= f.submit class: "btn btn-primary" %>

因为我在模型中有一些验证规则,所以它检查验证,并在验证发生时停止提交表单。因为,这是带有表单的表单,所有请求都由Ajax处理。所以,我希望在每个表单元素下面显示验证错误。请给我举个例子,以便我能完成这项任务。

2 回复 | 直到 6 年前

Javier Menéndez Rizo 6 年前

您可以检查每个属性的 errors 在窗体字段上,如果该属性有任何错误,只需显示它们

<% form_with(model: [:admin, @faculty]) do |f| %>
  <div class="card-title">Add Faculty</div>
  <div class="form-group">
    <%= f.label :faculty_name, class: "form-label" do %>
      Faculty Name <span class="form-required">*</span>
    <% end %>
    <%= f.text_field :faculty_name, class: "form-control", placeholder: "Faculty Name", required: true %>
    <% if @faculty.errors[:name].any? %>
      <ul>
        <% @faculty.errors[:name].each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    <% end %>
  </div>
<%= f.submit class: "btn btn-primary" %>

更好的解决方案可以在 helper :

帮手

module FacultyHelper

  def inline_errors(model, model_attribute)
    result = ""
    if model.errors[model_attribute].any?
         model.errors[model_attribute].each do |message|
            result += "<li>#{message}</li>"
        end
    end
    return "<ul>#{result}</ul>".html_safe
  end
end

视图 [更新:名称错误的包装]

<% form_with(model: [:admin, @faculty]) do |f| %>
  <div class="card-title">Add Faculty</div>
  <div class="form-group">
    <%= f.label :faculty_name, class: "form-label" do %>
      Faculty Name <span class="form-required">*</span>
    <% end %>
    <%= f.text_field :faculty_name, class: "form-control", placeholder: "Faculty Name", required: true %>
    <div id="user_name_errors">
       <%= inline_errors(@faculty, :name) %>
    </div>
  </div>
<%= f.submit class: "btn btn-primary" %>

对于remote:true,您需要在controller格式上定义.js

控制器

def create
    @faculty = Faculty.new(faculty_params)
    respond_to do |format|
        if @faculty.save
            format.html { redirect_to admin_faculties_path, notice: 'Faculty was successfully created.'}
            format.json {render json: @faculty, status: :created, location: @faculty}
            format.js
        else
            format.html {render '_form'}
            format.json {render json: @faculty.errors, status: :unprocessable_entity }
            format.js
        end
    end
end

创建相应的js.erb视图

J.S.Erb

$("#user_name_errors").html("<%= inline_errors(@faculty, :name) %>");

Anand 6 年前

jquery-form-validator-rails

使用它的例子-

<script type="text/javascript">
  $("#form_id").validate({ // initialize the plugin
    rules: {
      field_name1: { // get field name by inspecting element in broswer
        required: true
      },
      field_name2: { // get field name by inspecting element in broswer
        required: true
      }          
    },
    messages: {
      field_name1: {required:  "This field can't be blank!"},
      field_name2: {required:  "This field can't be blank!"}
    }
  });
</script>

Jquery form validation documentation