Question

我有一个如下形式的形式：

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

因为我正在使用：remote =＆gt;是的，我在javascript中处理来自控制器的响应：

$('#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){

  });

使用：remote =＆gt; false，我的表单会自动显示因尝试将记录保存在控制器中而导致的字段验证错误，如下所示：

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

如何让formtastic字段验证错误出现：remote =＆gt;是的，我在javascript中自己处理响应的地方？

Answer 1

将自己的形式放在视图中。

在处理已发布表单的控制器操作中，您可以在记录保存失败时重新“呈现”视图。渲染视图时，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

然后，在客户端javascript中，当记录无法保存时，您可以使用从控制器传回的渲染视图替换现有表单。

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

Answer 2

由于您使用javascript发布表单，我建议在提交任何数据之前在客户端进行验证。查看https://github.com/bcardarella/client_side_validations

Answer 3

Edwards的答案是最好的方法，因为它使用Formtastic来添加错误。如果您（像我一样）有一个非常动态的表单，在填写时添加字段并根据用户填写的值拉入图像和数据，但它不是一个选项。

我发现这个Gist很好地展示了如何添加错误，就像Formtastic添加它们一样：https://gist.github.com/2083155/172ce92caa8d4ee738c32e72e27945e17c909428

请注意，这会复制Formtastic中包含的逻辑，这绝不是最佳解决方案。如果Formtastic显示错误的方式在将来某个时候发生变化，则必须手动调整此代码。

如何在formtastic表单上显示字段验证错误消息：remote =＆gt;真正？

3 个答案: