Sitekit Forums

Developer Discussion - Positioning of form validation message

James Bentley

Posted on 14 August 2014

When a user completes a form, it seems to be assumed that the top of the form is near the top of the page – therefore when the form is submitted, validation occurs and there are validation errors, the user is taken back to the top of the page. If there are any errors and the form is lower down the page – e.g. a contact form in a page footer – the user is not necessarily aware that there are any errors. Is there any way that users can be taken to the top of the form, rather than the top of the page when this happens? I should probably point out that I'm referring to forms embedded using the following: [code]{ENQUIRYFORM}{FORMID}4492{/FORMID}{/ENQUIRYFORM}[/code] (I've had to use curly braces as the forum thought I was actually trying to embed a form and kept throwing up and error.)

James Delaney

Admin

Posted on 20 August 2014

You could use script to scroll to an error messages? JQuery could do it with something along the lines of within a document.ready function:

$('body').scrollTo('.formValidationError');

the formValidationError span tag does not exist unless an error has been identified so most of the time the trigger will not fire but it's there in the event it is needed.

James Bentley

Posted on 21 August 2014

Good thinking - I hadn't tried that. I'll give it a whirl.

James Bentley

Posted on 24 November 2014

Finally got round to trying this and for some reason it's not working.

The following is good though, for scrolling straight to either the validation message, or "thank you" message if you're using one.


$('html, body').animate({
scrollTop: $(".formValidationError, .formSubmissionMessage").offset().top
}, 500);

I've set this to half a second (500 milliseconds) for the animation. Change the number to change the speed. Hopefully others might find this useful.

James Bentley

Posted on 24 November 2014

Sorry - annoyed myself with the inconsistent use of single/double quotes there.

$('html, body').animate({

scrollTop: $('.formValidationError, .formSubmissionMessage').offset().top

}, 500);

That's better.