如何在 rails 中使用锚点在提交联系表单后查看错误消息

Question

我是 rails 的新手，在阅读了 Rails 教程中 Ruby 的第一章后，我正在尝试在最低部分设置带有联系表的简单单页纸页面的。我成功了，它在正确提交表单后发送电子邮件。不幸的是，如果您的输入不正确，页面将再次呈现，但视图将停留在页面顶部。用户将无法看到他犯了一个错误，除非他向下滚动页面以再次查看表单（在联系表单上方呈现错误消息）——这不是很有用。此外，如果输入正确，页面将再次呈现并保持在顶部，但我仍然没有为该选项设置任何确认消息。

我知道还有 flash 选项，但我还没搞清楚。如果您认为这是快速而干净的选项，请告诉我如何设置它。

这是我的应用程序的代码：

static_pages_controller.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

routes.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 语法不是最好的，但我不知道如何更正它以使其工作，并且在无效提交后，呈现页面正确地关注联系表单和错误消息。

提前致谢！

Answer 1

您不能仅在 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/

如何在 rails 中使用锚点在提交联系表单后查看错误消息

How to use anchor in rails to see error msg after submiting contact form

anchor

routes

ruby-on-rails

contact-form