3

私はRails 3.1.0rc4とclient_side_validations 3.1.0を使用しています。メインリクエストでフォームがレンダリングされている限り、すべてが完全に機能します。ただし、フォーム自体がjavascriptを介してページに追加されている場合は、フォームを送信するとサーバー側の検証が行われます。私は問題は、フォームがjavascript経由でページに追加されたときに、何らかの形でクライアント側の検証機能を「バインド」する必要があると考えています。新しいフォームがDOMに追加されたときにclient_side_validations(3.1.0)が機能しない

#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') %>"); 

フォームが送信され、検証をサーバー側に適用されます。

私が迷っているものは何ですか?だから、

// 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(); }) 

を、私の特定のケースでは、私が行うために必要な:

答えて

8

はこの宝石のためのJavaScriptのソースコードで答えを見つけ

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

幻想!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! – beck03076

+0

ありがとう! – why

+0

私は同じ問題を抱えています。この質問を見てください。 http://stackoverflow.com/questions/17556841/on-layoutfalse-losing-client-side-validation-propertiesありがとう – user588324

3

あなたはUJSを使用してどのくらいに応じて、(私はたくさんあります)、すべてのujsファイルでvalidateメソッドを呼び出すのではなく、このようなことをするのがより理にかなっているかもしれません。

$('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 
+0

私は同じ問題を抱えています。この質問をご覧ください。 http://stackoverflow.com/questions/17556841/on-layoutfalse-losing-client-side-validation-propertiesありがとう – user588324

関連する問題