formsruby-on-rails-4page-jump

Rails 4: scroll browser window to form after failed submission (validation errors)


So I have form (typical articles and comments example) for comments at bottom of page. If validation fails I display validation errors.

Thats my comments controller code:

class CommentsController < ApplicationController
  before_action :authenticate_admin!, only: [:destroy]
  expose(:article)
  expose(:comment, attributes: :comment_params)
  expose(:reply) { Reply.new }

  def create
    comment.article = article
    if verify_recaptcha(model: comment, message: t('captcha_verification_error')) && comment.save
      flash[:comment_notice] = t('comment_created_successfully')
      redirect_to article_path(article) + '#comments'
    else
      flash[:comment_errors] = comment.errors.full_messages
      render 'articles/show'
    end
  end

  def destroy
    comment.destroy
    redirect_to article_path(article)
  end

  private

  def comment_params
    params.require(:comment).permit(:author, :content)
  end
end

Here is form:

= simple_form_for(comment, url: article_comments_path(article)) do |f|
  - if flash[:comment_errors]
    .alert.alert-danger
      strong= pluralize(flash[:comment_errors].count, 'error') + ' prohibited this article from being saved:'
      - flash[:comment_errors].each do |msg|
          ul
            li= msg
  fieldset class='form-group'
    = f.label t('author')
    = f.text_field :author, class: 'form-control', placeholder: t('who_are_you')
  fieldset class='form-group'
    = f.label t('content')
    = f.text_area :content, class: 'form-control', rows: 6, placeholder: t('what_do_you_want_to_say')
  fieldset class='form-group'
    = recaptcha_tags
  fieldset class='form-group'
    = f.submit t('create_comment'), class: 'btn btn-primary'

For forms I'm using simple-form. Also I'm using decent exposure and slim

I want my page to scroll down to form after validation fails (So user don't have to scroll manually). Is there simple way to achieve that?

AFAIK I can't pass anchor to render (That would solve problem). Any ideas?


Solution

  • So I solved it with this javascript placed in comment form:

    javascript:
      if (document.getElementById("comment_errors")) {
        location.hash = '#new_comment';
      }
    

    When element with id 'comment_errors' (My validation errors div) exists it jumps to it.