代码之家 › 专栏 › 技术社区 › Kusnierewicz

如何在提交联系表格后使用导轨中的锚来查看错误消息

contact-form anchor routes ruby-on-rails

Kusnierewicz · 技术社区 · 11 年前

我是新手,在阅读了RubyonRails教程的第一章之后,我尝试在页面的最下面部分设置一个简单的带有联系人表单的寻呼机。我成功了,它在正确提交表单后发送电子邮件。不幸的是,若输入不正确,页面将再次呈现,但视图将停留在页面顶部。用户将无法看到他犯了错误,除非他向下滚动页面再次查看表单(联系人表单上方有错误消息呈现)-这不是很有用。同样,若输入正确,页面将再次呈现并保持在顶部,但我仍然并没有为该选项设置任何确认消息。

我知道也有闪光选项,但我还没有弄清楚。如果你认为这是一个快速而干净的选项,请告诉我如何设置它。

以下是我的应用程序代码:

静态页面控制器.rb:

class StaticPagesController < ApplicationController
  before_action :setup_contact_form

  def home
  end

  def submit_form
    @contact_form.attributes = contact_form_params

    if @contact_form.save
      redirect_to action: :home
    else
      render :home
    end
  end

  private
  def setup_contact_form
    @contact_form = ContactForm.new
  end

  def contact_form_params
    params.require(:contact_form).permit(:name, :email, :phone, :message)
  end
end

路由.rb:

Rails.application.routes.draw do
  root 'static_pages#home'

  resources :static_pages, only: [:home] do
    collection do
      post :submit_form
      get :home
    end
  end

来自home.html.erb的联系人表单布局:

<%= form_for @contact_form, :url => submit_form_static_pages_path(@contact_form, :anchor => 'form') do |f| %>

我认为routes.rb语法不是最好的,但我不知道如何纠正它以使其正常工作,在提交无效后,呈现页面正确地关注联系人表单和错误消息。

提前感谢!

1 回复 | 直到 11 年前

patrick 11 年前

不能仅在redirect_to调用上在渲染调用上添加锚点。这对您来说是有问题的,因为您特别希望显示使用redirect_to无法显示的错误。

你考虑过改用AJAX吗?这意味着用户在提交联系人查询后不必观察/等待页面加载。

也就是说,如果AJAX不适合您,那么当出现错误时,您可以使用JavaScript滚动到表单:

<!-- in your view -->
<script type="text/javascript">
  $(document).ready(function () {
    if ($('.error-message').length) {
      $('html, body').animate({
          scrollTop: $(".error-message").offset().top
      }, 3000);
    };
  });
</script>

JSFiddle: http://jsfiddle.net/patrickfq/jb7zv7m9/