ruby-on-rails - Rails 模态表单 - 无法在模态中显示验证错误

标签 ruby-on-rails validation modal-dialog

编辑:我忘了提及我正在模型级别使用验证,并且效果很好。因此,验证阻止了模态表单的提交(并且 ajax:error 被调用),但我没有运气处理生成的错误对象并正确显示错误。现在我只使用占位符文本(“表单有错误”)。同样,验证和显示错误在我的非模式(非 ajax)表单(我使用部分错误消息)中运行良好。我真的希望我可以在我的模式对话框中渲染该部分,您会认为这很简单。

我正在为此抓狂。

我有一个“添加游览”表单,在该表单中,您可以从数据库中选择建筑物以添加到游览中(我使用 jquery tokeninput 来搜索和选择建筑物)。一切都很好。

我添加了用户通过提供“添加建筑物”链接来添加新建筑物的功能,该链接会显示一个模式表单。我处理结果,一切都很好(保存构建、取消模式、添加 token 等)。

除了模态形式的验证之外,一切都很好。 。 。这根本不起作用。我尝试过 client_side_validations,我尝试编写 CoffeeScript 来迭代 Controller 返回的错误对象等。

无论如何,我已经尝试了我所知道的一切,所以现在我向你们寻求帮助。现在,我只在 Coffeescript 文件中包含占位符错误处理代码(仅以非常基本的方式显示“FORM HAS ERRORS”)。我放弃了之前所有的尝试,因为它变得丑陋,我真的只是在寻找最好的方法来做到这一点。

以下是相关文件。

building.js.coffee

$ ()->
  $("form.new_building").on "ajax:success", (event, data, status, xhr) ->
    $("form.new_building")[0].reset()
    $('#new-building-modal').modal('hide')
    fulladdress = "#{data.address} (#{data.name}, #{data.city}, #{data.zip})"
    $('#tour_building_tokens').tokenInput("add", {id: data.id, address: fulladdress} )

  $("form.new_building").on "ajax:error", (event, xhr, status, error) ->
    $('#display_errors').append('<font color="red"><strong>FORM HAS ERRORS</strong></font><br><br>')
    $('#display_errors').show()

buildings_controller.rb

....

def create
    @building = Building.new(params[:building])

    respond_to do |format|
      if @building.save
        format.html { redirect_to @building, notice: 'Building Created!' }
        format.json { render json: @building, status: :created, location: @building }
      else
        format.html { render 'new' }
        format.json { render json: @building.errors, status: :unprocessable_entity }
      end
    end
end

new.html.erb

<% provide(:title, 'Add Tour') %>

<h1>Add Tour</h1>

<div class="row">
    <div class="span6 offset3">
        <%= form_for(@tour) do |f| %>

            <%= render 'fields', f: f %>

            <%= link_to 'Add Building', '#new-building-modal', 'data-toggle' => "modal" %>

            </br>
            </br>

            <%= f.submit "Add Tour", class: "btn btn-large btn-primary" %>
        <% end %>
    </div>
</div>


<div id='new-building-modal' class='modal hide fade'>


            <div class = "modal-body">

                <%= form_for(Building.new, remote:true, html: {"data-type" => :json}) do |f| %>

                    <div id="display_errors" style="display:none;">
                    </div>

                    <%= f.label :name %>
                    <%= f.text_field :name %>

                    <%= f.label :address %>
                    <%= f.text_field :address %>

                    <%= f.label :city %>
                    <%= f.text_field :city %>

                    <%= f.label :zip %>
                    <%= f.text_field :zip %>

            </div>

            <div class = "modal-footer">

                    <%= f.submit "Add Building", class: "btn btn-large btn-primary" %>
            </div>

                <% end %>
</div>

哦,我还有一个共享错误消息部分,我现在没有与此模式一起使用(因为我无法让模式“刷新”以显示错误)。在完美的世界中,我会在模态中使用相同的部分,因为它与我的其他非模态形式配合得很好。

这是部分内容(同样,当前在上面的代码中没有渲染它)。

<% if object.errors.any? %>
<div id="error_explanation">
    <div class="alert alert-error">
        The form contains <%= pluralize(object.errors.count, "error") %>.
    </div>
    <ul>
        <% object.errors.full_messages.each do |msg| %>
            <% if msg != "Password digest can't be blank" %>
                <li>* <%= msg %></li>
            <% end %>
        <% end %>
    </ul>
</div>

预先感谢任何人可以提供的任何帮助。我需要尽可能多的细节。我在 Stack Overflow 上研究过相关问题,每次我以为自己已经很接近时,却一无所获。

最佳答案

感谢muttonlamb为我指明了正确的方向。我 50% 确定它必须与解析 JSON 相关,他说服我继续走这条路。讽刺的是,这是this SO question这帮助我得到了最终的答案。该问题的答案(涉及将错误打印到控制台)正是我正在寻找的。事实证明,这并不是我解析错误的原因。 。 。我正在解析错误的对象。这是最终有效的实现。 。 .

新的 CoffeeScript(注意我如何根据需要显示、隐藏和清除 div):

$ ()->
  $("form.new_building").on "ajax:success", (event, data, status, xhr) ->
    $("form.new_building")[0].reset()
    $('#new-building-modal').modal('hide')
    fulladdress = "#{data.address} (#{data.name}, #{data.city}, #{data.zip})"
    $('#tour_building_tokens').tokenInput("add", {id: data.id, address: fulladdress} )
    $('#error_explanation').hide()

  $("form.new_building").on "ajax:error", (event, xhr, status, error) ->
    errors = jQuery.parseJSON(xhr.responseText)
    errorcount = errors.length
    $('#error_explanation').empty()
    if errorcount > 1
      $('#error_explanation').append('<div class="alert alert-error">The form contains ' + errorcount + ' errors.</div>')
    else
      $('#error_explanation').append('<div class="alert alert-error">The form contains 1 error</div>')
    $('#error_explanation').append('<ul>')
    for e in errors
      $('#error_explanation').append('<li>' + e + '</li>')
    $('#error_explanation').append('</ul>')
    $('#error_explanation').show()

新 View :

<% provide(:title, 'Add Tour') %>

<h1>Add Tour</h1>

<div class="row">
    <div class="span6 offset3">
        <%= form_for(@tour) do |f| %>

            <%= render 'fields', f: f %>

            <%= link_to 'New Building', '#new-building-modal', 'data-toggle' => "modal" %>

            </br>
            </br>

            <%= f.submit "Add Tour", class: "btn btn-large btn-primary" %>
        <% end %>
    </div>
</div>


<div id='new-building-modal' class='modal hide fade'>

            <div class = "modal-header">
                <div id="error_explanation" style="display:none;">
                </div>
            </div>

            <div class = "modal-body">

                <%= form_for(Building.new, remote:true, html: {"data-type" => :json}) do |f| %>

                    <%= f.label :name %>
                    <%= f.text_field :name %>

                    <%= f.label :address %>
                    <%= f.text_field :address %>

                    <%= f.label :city %>
                    <%= f.text_field :city %>

                    <%= f.label :zip %>
                    <%= f.text_field :zip %>

            </div>

            <div class = "modal-footer">

                    <%= f.submit "Add Building", class: "btn btn-large btn-primary" %>
            </div>

                <% end %>
</div>

新 Controller :

def create
     @building = Building.new(params[:building])

    respond_to do |format|
      if @building.save
        format.html { redirect_to @building, notice: 'Building Created!' }
        format.json { render json: @building, status: :created, location: @building }
      else
        format.html { render 'new' }
        format.json { render json: @building.errors.full_messages, status: :unprocessable_entity }
        end
    end
  end

最后,为了在添加错误时防止模式滚动(我希望它自动调整大小),我添加了以下 CSS:

#new-building-modal {
    max-height: 600px;
}

希望所有这些细节可以防止其他人在愚蠢的模态验证错误上浪费近一周的时间。

关于ruby-on-rails - Rails 模态表单 - 无法在模态中显示验证错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15470126/

相关文章:

ruby-on-rails - Recurly 与 SaaS 套件

javascript - NestJS:如何在自定义验证器中同时访问 Body 和 Param?

mysql - Bootstrap 错误 3 : modal and $_GET my ID

javascript - AngularJS 模式对话框未打开

java - 如何从按钮关闭 jdialog?

jquery - Turbolinks 5 ajax POST

mysql - Rails 多态性索引

ruby-on-rails - 我可以显示 PayPal 框架来显示我的用户的付款报告吗?

java - GWT CellTable 输入验证

javascript - 依赖下拉列表的数据验证