jquery validation plug-in and scrolling

Question

I'm using the jquery validation plug-in. When there are invalid fields, it focuses on the first invalid field. However, my labels are on top of my fields and I want to scroll up just a bit so the user can see both the label and the field. I've looked at the scrollTo plug-in, but haven't figured out an easy way to integrate it. Maybe someone has done something like this before?

Answer 1

Ok, so you used the focus to jump to your element which failed validation.

you can remove that code since you are going to try implement scrolling towards that element.

these steps need to be taken in order to scroll to the correct element.

1. adding the scrollTo plugin inside your head.
2. making sure that the label is ready (with an ID or class or something) (which in your case is the target, since you want to scroll to the location of the label and not the input field)

3. if you now do:

   $.scrollTo( '#yourlabelID', "slow");

it will roll to the position of your label.

as in regular scrolling, if the element is too close to the bottom of the page, it will only scroll to the bottom of the page and not further.

demo: http://sander.netcentric.be/test/scroll.html

Answer 2

I had a similar issue. I'm displaying my validation error's into an ordered list above my form rather than displaying them inline. When the jQuery validate plugin finds an error, I set the form to scroll to the top of the form to notify the user of that error(s) by editing the invalidHandler function and disabling the focusInvalid option.

$("#residential-evaluation").validate({
 // Scroll to top of #errors on validate
 invalidHandler: function(form, validator){
  $.scrollTo('#errors', "slow");
 },
 focusInvalid:false,
 //Error output
 errorLabelContainer: "#errors",
 wrapper: "li"
});

This post was really useful as well:

http://stackoverflow.com/questions/1218118/overriding-a-function-within-the-jquery-validation-plugin

This setup relies on the scrollTo plugin for that added animation.