Scroll to the first error in form – using jQuery

Oftentimes we ask our users to provide us with an awful lot of information in things like registration forms. It’s no wonder that every now and again the poor dears forget to fill in a box or make a mistake.

On longer or complex forms users can find it difficult to see where the errors actually are.

The other week our QA manager asked us (the front end team) to scroll to the first error on a page. I started off thinking that it was going to be difficult and time consuming to achieve, but with the awesomeness of jQuery & one little-bitty plugin I was able to achieve the desired effect in  3 or 4 lines of code.

This technique relies on you already having validated your form and added a class of “error” to you the markup, either on the form elements or an error message.

You will need

  • jQuery
  • The scrollTo plugin (I used the minified version)
  • A web page with some errors on it
  • a couple of old yoghurt pots and some sticky back plastic.

And here’s the code

add this to the head of your document:

  1. <script type=“text/javascript” src=“/JQuery.js”></script>
  2. <script type=“text/javascript” src=“/jquery.scrollTo-min.js”>
  3. </script>
  4. <script type=“text/javascript”>
  5.     $(document).ready(function() {
  6.         $(“.error:first”).attr(“id”,”firstError”);
  7.         $(“#firstError”).each(function (){
  8.             $.scrollTo(“#firstError”, 800);
  9.         });
  10.     });
  11. </script>

And Bob’s your uncle!

Please let me know if you found this technique useful.

Incidentally the code for this post was prepared with the very excellet postable. Check it out!