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

Ruby on rails 提交联系表后如何在rails中使用锚来查看错误消息,ruby-on-rails,routes,anchor,contact-form,Ruby On Rails,Routes,Anchor,Contact Form,我是rails新手,在阅读了RubyonRails教程的第一章之后,我正在尝试在页面的最低部分设置带有联系人表单的简单单页导航。我让它工作了,它在正确提交表格后发送电子邮件。不幸的是,如果输入不正确,页面将再次呈现,但视图将保留在页面顶部。用户将无法看到他犯了错误,除非他向下滚动页面再次查看表单(在联系人表单上方呈现错误消息)-这不是很有用。另外,若输入正确,页面将再次呈现并保持在顶部,但我仍然并没有为该选项设置任何确认消息 我知道也有flash选项,但我还没弄明白。如果你认为这是一个快速和干净

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

我知道也有flash选项,但我还没弄明白。如果你认为这是一个快速和干净的选择,请让我知道如何设置它

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

静态页面\u 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
home.html.erb中的联系人表单布局:

<%= form_for @contact_form, :url => submit_form_static_pages_path(@contact_form, :anchor => 'form') do |f| %>
submit_form_static_pages_path(@contact_form,:anchor=>'form')do | f |%>
我认为routes.rb语法不是最好的,但我不知道如何纠正它使其工作,在无效提交后,正确地呈现页面,重点是联系人表单和错误消息


提前谢谢

不能在渲染调用上仅在重定向调用上添加锚。这对您来说是有问题的,因为您特别希望显示重定向到的错误

您考虑过使用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>

$(文档).ready(函数(){
if($('.error message').length){
$('html,body')。设置动画({
scrollTop:$(“.error message”).offset().top
}, 3000);
};
});
JSFiddle:

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