js Load div on invalid form submit

I think I put this in the wrong forum last time...

I have a form located a ways down the page and when a required field isn't filled properly, the form reloads with the error message, but the user can't see the error message because it's wayyyy down the page.

I tried inserting this code:

jQuery(document).ready(function(jQ){
  jQ('#gkBottom1-3')[0].scrollIntoView();
});

in a js action in the onFail event, but it did nothing as far as I can see (though #gkBottom1-3 is a valid div tag).

Anyone know why this method does not work?

Hey folks,
Any thoughts here... still stumped.

Hi guysmiley,

This seems to work OK when I test

jQuery(document).ready(function(jQ){
  jQ('html,body').animate( { scrollTop: jQ('.gbs3').offset().top }, 'slow');
});

The jQ('.gbs3') selector sets the element scrolled to - in this case it is the CF wrapping div, if you have more than one form on the page or want to scroll to a particular point or message then you can use an id instead jQ('#some_element_id')

Bob

Hi Greyhead,
Thanks for the code, and yes, it works fine on a successful form submit. However, if there's an error in the captcha, the scroll effect does not work (despite the fact that the js is identical for both onSuccess and onFail. Is there something wrong with me setup (see attached)?

Hi guysmiley,

The Load JS action in the On Fail event needs to be before the Event Loop action otherwise it will never run.

Bob

You, sir, are a steely-eyed-missile-man.