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

dominikduda

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?

dominikduda

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Form submission after Javascript Validation

From Dev

Close Window After Submission of Form

From Dev

PHP Form Validation Showing Errors Before Submission

From Dev

Rails 4 with Devise: Validation errors displayed immediately upon rendering form

From Dev

Rails 4 with Devise: Validation errors displayed immediately upon rendering form

From Dev

Rails Nested form validation errors

From Dev

How to render validation errors of form partial - Rails

From Dev

How to render validation errors of form partial - Rails

From Dev

Validation errors are not displaying at multipart form in rails

From Dev

Jquery form validation and submission

From Dev

Ajax Form Validation and Submission

From Dev

Rails Validation Failed -- want to stay on form

From Dev

laravel4 form validation errors

From Dev

Not able to close modal pop up window after form submission

From Dev

Rails 4 how to change structure of validation errors

From Dev

parsley.js form validation - confirm when no errors found on form submission

From Dev

How to show errors inline in codeigniter form validation using ajax form submission?

From Dev

close browser window after n seconds rails

From Dev

Form submission with Stripe and Rails

From Dev

Rails/Ajax change form from create to update after submission

From Dev

Rails 4 shallow routes resource form submission not working

From Dev

Field validation before form submission

From Dev

Manipulate form between submission and validation

From Dev

jquery form validation to prevent submission

From Dev

Validation errors in dialog not updating after failed submit in JSF

From Dev

Validation errors in dialog not updating after failed submit in JSF

From Dev

Archive validation failed with errors

From Dev

MVC Ajax form submission failed

From Dev

rails 4 delete div after remote link submission

Related Related

  1. 1

    Form submission after Javascript Validation

  2. 2

    Close Window After Submission of Form

  3. 3

    PHP Form Validation Showing Errors Before Submission

  4. 4

    Rails 4 with Devise: Validation errors displayed immediately upon rendering form

  5. 5

    Rails 4 with Devise: Validation errors displayed immediately upon rendering form

  6. 6

    Rails Nested form validation errors

  7. 7

    How to render validation errors of form partial - Rails

  8. 8

    How to render validation errors of form partial - Rails

  9. 9

    Validation errors are not displaying at multipart form in rails

  10. 10

    Jquery form validation and submission

  11. 11

    Ajax Form Validation and Submission

  12. 12

    Rails Validation Failed -- want to stay on form

  13. 13

    laravel4 form validation errors

  14. 14

    Not able to close modal pop up window after form submission

  15. 15

    Rails 4 how to change structure of validation errors

  16. 16

    parsley.js form validation - confirm when no errors found on form submission

  17. 17

    How to show errors inline in codeigniter form validation using ajax form submission?

  18. 18

    close browser window after n seconds rails

  19. 19

    Form submission with Stripe and Rails

  20. 20

    Rails/Ajax change form from create to update after submission

  21. 21

    Rails 4 shallow routes resource form submission not working

  22. 22

    Field validation before form submission

  23. 23

    Manipulate form between submission and validation

  24. 24

    jquery form validation to prevent submission

  25. 25

    Validation errors in dialog not updating after failed submit in JSF

  26. 26

    Validation errors in dialog not updating after failed submit in JSF

  27. 27

    Archive validation failed with errors

  28. 28

    MVC Ajax form submission failed

  29. 29

    rails 4 delete div after remote link submission

HotTag

Archive