I have a page where we have a fixed banner at the top, then a scrolling section down below that fixed banner. In this scrolling section, we have the form we are validating. If I have an error with a field earlier in the form, that is current scrolled up into the banner ( or maybe even above the banner ), it does not scroll to the first error field correctly. How do I resolve this type of problem?
I have three screen shots to better explain what I mean. I could not post the images themselves, so posted links to the images.
Figure 1: Before submitting form
EDIT ( 04/18/2014 ): I can confirm that this code from jquery.validationEngine.js is what is not working. Basically, no matter what I set "destination" to, it still scrolls to the top of the window, NOT the top of the container all this stuff is in. Even if I force "destination" to be some huge number, it is like it ignores it. Should this jQuery plugin be doing things differently?
$("html, body").animate({
scrollTop: destination
}, 1100, function(){
if(options.focusFirstField) first_err.focus();
});
$("html, body").animate({scrollLeft: fixleft},1100);
Ok, I now have an even better fix. In the same section of code, I applied the below changes:
_validateFields: function(form) {
...... // code removed for the sake of brevity, but enough include to show context.
if (errorFound) {
if (options.scroll) {
var errorfld = first_err; // This is the first change, at around line 371 in the original code.
var fixleft = first_err.offset().left;
//prompt positioning adjustment support. Usage: positionType:Xshift,Yshift (for ex.: bottomLeft:+20 or bottomLeft:-20,+10)
var positionType=options.promptPosition;
if (typeof(positionType)=='string' && positionType.indexOf(":")!=-1)
positionType=positionType.substring(0,positionType.indexOf(":"));
if (positionType!="bottomRight" && positionType!="bottomLeft") {
var prompt_err= methods._getPrompt(first_err);
if (prompt_err) {
errorfld = prompt_err;
}
}
var destination= form.scrollTop() + ( errorfld.offset().top - form.position().top ) + ( errorfld.height()/2 );
Once again, I am not sure if this will work in all uses of the jquery.validationEngine.js plugin, but it works in my case. If anyone else has a better idea, do tell me.