2011-11-10 10 views
2

私は次のようなformtasticの形式があります:私が使用しているのでフィールドバリデーションのエラーメッセージをformtasticフォームに表示するには:remote => true?

= semantic_form_for @record, :remote => true, :id => 'my_form', :url => ... 

を:=リモート:で

$('#my_form') 
    .bind("ajax:beforeSend", function(evt, xhr, settings){ 

    }) 
    .bind("ajax:success", function(evt, data, status, xhr){ 
     $('#response').append(xhr.responseText); 
    }) 
    .bind('ajax:complete', function(evt, xhr, status){ 

    }); 

:リモート=>真のは、私はJavaScriptでコントローラからの応答を処理> falseの場合、私のフォームは、コントローラにレコードを保存しようとすると、フィールド検証エラーを自動的に表示します:

@record = Record.new(params[:record]) 
@record.save 

フォームの作成方法tasticフィールドの検証エラーは次のように表示されます:remote => true、javascriptで自分自身で応答を処理していますか?

答えて

4

フォームタストフォームを単独で表示します。

投稿されたフォームを処理するコントローラアクションでは、レコードの保存が失敗したときにビューを再レンダリングできます。ビューがレンダリングされると、formtasticは@recordのerrorsフィールドを調べ、検証エラーを表示します。保存が成功すると、空の文字列をレンダリングして成功を示すことができます。 (より複雑な応答方式は何が必要に応じて可能です。)

def save_record 
    if request.xhr?    # form submitted using remote => true 
     respond_with do |format| 
     format.html do 
      if @record.save 
      # record saved successfully 
      render :text => "" # indicate success with empty response 
      else     # error saving record; send back form with validation errors marked 
      render :template => '/path/to/record_form_view', :layout => false 
      end 
     end 
     end 
     return 
    end 
    #... 
    end 

次に、クライアント側でレコードが保存に失敗した場合、あなたが戻って渡されたレンダリングされたビューで、既存のフォームを置き換えることができますジャバスクリプト、コントローラから。

// reference: http://www.alfajango.com/blog/rails-3-remote-links-and-forms/ 
function setup_record_form_bindings() { 
    $('#record_form_id') 
    .bind("ajax:beforeSend", function(evt, xhr, settings){ 
    var $submitButton = $(this).find('input[name="commit"]'); 
    $submitButton.get(0).value = "Submitting..."; 
    }) 
    .bind("ajax:success", function(evt, data, status, xhr){  
     if (xhr.responseText === "") {    // successful save 
                // do somethign appropriate here 
     } else {         // error saving 
     $('#record_form_id').remove();   // remove old form, to replace with form in responseText 
     $('#record_form_parent_id').append(xhr.responseText); // should be the newly rendered form (with validation errors shown) 
     setup_record_form_bindings(); 
     } 
    }) 
    .bind('ajax:complete', function(evt, xhr, status){ 
    }); 
} 
setup_record_form_bindings(); 
2

フォームを投稿するためにJavaScriptを使用しているので、データを送信する前にクライアント側で検証を行うことをお勧めします。チェックアウトhttps://github.com/bcardarella/client_side_validations

+0

このような素敵な宝石を参考にしてくれてありがとう:-)魅力的な作品:-) +1 :-) –

0

エドワーズの答えは、それがエラーを追加するFormtasticを使用しているので、それを行うための最善の方法です。 あなた(私のような)がフィールドを追加している間にフィールドを追加し、ユーザーが塗りつぶした値に基づいてイメージとデータを取得する非常に動的なフォームを持っている場合は、オプションではありません。

私はうまくエラーにFormtasticは、それらを追加するのと同じ方法を追加する方法を示し、この骨子が見つかりました:これが最適解になることはありませんFormtasticに含まれるロジックを、複製することをけれどもhttps://gist.github.com/2083155/172ce92caa8d4ee738c32e72e27945e17c909428

は注意してください。将来のある時点でエラーを示すFormtasticな方法が変わった場合は、このコードを手動で調整する必要があります。

関連する問題