如何在AJAX提交后验证表单?

时间:2014-11-01 23:00:37

标签: javascript jquery ruby-on-rails ajax jquery-file-upload

我有一个表单,我通过AJAX提交,因此服务器的预期响应格式是javascript。问题是我无法像这样进行验证工作。通常我会这样做:

  # POST /cats
  # POST /cats.json
  def create
    @cat = Cat.new(cat_params)

    respond_to do |format|
      if @cat.save
        format.html { redirect_to @cat, notice: 'Cat was successfully created.' }
        format.json { render action: 'show', status: :created, location: @cat }
      else
        format.html { render action: 'new' }
        format.json { render json: @cat.errors, status: :unprocessable_entity }
      end
    end
  end 

但现在我有这样的情况:

  # POST /cats
  # POST /cats.json
  def create
    @cat = Cat.new(cat_params)

    respond_to do |format|
      if @cat.save
        format.js { }
      else
        format.js { ????? }
      end
    end
  end

我创建了create.js.erb,如果保存了新对象,它会为我提供所需的一切,但如果没有保存对象,我不知道如何处理验证显示。在我的表单中,如果我不使用AJAX,我可以使用它:

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

我该怎么办?我正在使用Rails 4。

2 个答案:

答案 0 :(得分:5)

create.js.erb中,您可以再次呈现表单unless @cat.persisted?

  1. 将表格改为另一部分,例如&#39; _form.html.erb&#39;。

  2. 如果您的表单位于ID为#34; my_form_div&#34;,

  3. 的div中

    然后create.js.erb将是

    <%  if @cat.persisted? %>
      # code for success save
    <% else %>
      $('#my_form_div').html('<%= escape_javascript(render('form')) %>');
    <% end %>
    

    这将再次呈现整个表单以及错误。如果您不想再次呈现完整表单,则只能对错误div执行相同操作。

答案 1 :(得分:2)

你可以在成功和失败两种情况下渲染create.js.erb,并在你的create.js.erb文件中检查是否@ cat.errors.any?如果是这样你可以写一些jquery并在html中注入错误,如果不是这样的过程与成功场景一样。

示例代码来说明我的意思:

def create
  @cat = Cat.new(cat_params)

  respond_to do |format|
   @error = @cat.save
   // or you can use if if you need more in success case to be done before rendering
   format.js {}
  end
end
你的create.js.erb ::

中的

<% if @error %>
  // loop over errors like your working code in the case of html request
<% else %>
  // success scenario
<% end %>