guillaumepotier / Parsley.js

Validate your forms, frontend, without writing a single line of javascript

Home Page:http://parsleyjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

After Submit -> Scroll Offset if error in a field

chequille opened this issue · comments

Hi,
my page does have a fixed header.
Therefore, when there is a wrong entry in a field of the form or a mandatory field not filled, page scrolls to the first field with an error.
Unfortunately, this field is covered by my fixed header and therefore not visible.
Is there a way to change this with some kind of offset to this scroll function?

Please let me know if you have any idea.
BR
Jürgen

This seems like a very valid use case for an additional feature/setting.

Hi Marc, this would really be nice. I am wondering why there is not more feedback on this. I cannot image that I am the only one facing this problem !?!?!?

In the menatime, I solved this problem with the following additional line in parsley.js
It is around line 1293.
It is a solution which worked for me.

	_this6.focus();
	 $('html, body').animate({
	        scrollTop: $("#"+_this6.focus()[0]['id']).offset().top - 300
          }, 2000);

Would be great if there is something from your site, as this is maybe not good coded stuff.

Regard,
Jürgen

Hello, we're having the same problem.

We are using a fixed header on our site. When an input field ist behind the fixed header, parsley does not recognize that this element is not visible for the user and therefore focus it just behind the header. But if this input field is outside the window view then parsley focus the input field centered in the viewport.

I am not quite sure how parsley determines if an input field is outside the viewport. But a possible solution might be a custom viewport element for the determination instead of the default window viewport.

Let me know what you think.

Kind Regards,
Sven

Hi,
the solution of @chequille works fine.
It would be great to set an offset for the fixed header via config.

Regards, TJ

Is there an update for this?