将新表单添加到 DOM 时，client_side_validations (3.1.0) 不起作用

Question

我正在使用 Rails 3.1.0rc4 和 client_side_validations 3.1.0。只要表单在主请求中呈现，一切都会完美运行。但是，如果表单本身是通过 javascript 添加到页面的，那么提交表单会导致服务器端验证。我怀疑问题在于，当通过 javascript 将表单添加到页面时，我需要以某种方式将客户端验证功能“绑定”到它。

例如，假设我有一个简单的表格，您可以在其中发布新的职位列表：

#jobs/new.html.erb
<%= form_for [@job], :validate => true  do |f| %>

  <%= render :partial => 'common/form_errors', :locals => {:record => @job} %>

  <div class="field">
      <%= f.label :title %>
      <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :description %>
    <%= f.text_field :description %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

以及我的模型中的以下验证：

class Job < ActiveRecord::Base
  validates_presence_of :title, :description
end

如果我通过访问浏览器中的 new_job_path 来访问此表单，我的客户端验证效果很好。

但是，如果我将此表单插入另一个页面（例如 jobs_path 索引页面），如下所示：

#jobs/index.html.erb
<%= render @jobs %>

<div id="form-job-new"> </div>

<%= link_to 'New Job', new_job_path, :remote =>true %>

和：

#jobs/new.js.erb
$('#form-job-new').append("<%= escape_javascript render(:file => 'jobs/new.html.erb') %>");

然后当表单被提交时，验证被应用到服务器端。

知道我错过了什么吗？

Answer 1

在这个 gem 的 javascript 源代码中找到了答案：

// Main hook
// If new forms are dynamically introduced into the DOM the .validate() method
// must be invoked on that form
$(function() { $('form[data-validate]').validate(); })

所以，在我的特殊情况下，我需要这样做：

#jobs/new.js.erb
$('#form-job-new').append("<%= escape_javascript render(:file => 'jobs/new.html.erb') %>");
$('form[data-validate]').validate();

Answer 2

根据你使用 ujs 的程度（我做了很多），这样做可能比在每个 ujs 文件中调用 validate 方法更有意义。

$('body').bind("ajax:success", function() {
   if($('form[data-validate]').length){
      $('form[data-validate]').validate();
   }
});

或咖啡脚本

$("body").bind "ajax:success", ->
  $("form[data-validate]").validate()  if $("form[data-validate]").length