client_side_validations (3.1.0) не работает при добавлении новой формы в DOM - PullRequest
Новая
       293

client_side_validations (3.1.0) не работает при добавлении новой формы в DOM

3 голосов
/ 19 июля 2011

Я использую 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') %>");

затемпри отправке формы проверки применяются на стороне сервера.

Есть идеи, что мне не хватает?

Ответы [ 2 ]

8 голосов
/ 19 июля 2011

Нашел ответ в исходном коде 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();
3 голосов
/ 17 мая 2012

В зависимости от того, сколько вы используете ujs (я много делаю), может иметь смысл сделать что-то подобное, вместо того, чтобы вызывать метод validate в каждом файле ujs. 

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

или coffeescript 

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