jquery-validation-engine scroll to first error

Question

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

Figure 2: After submitting form, bad scrolling. It goes to first error field, just not scrolled correctly

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);

Answer 1

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.

Answer 2

Based on this post, I changed jquery.validationEngine.js as follows:

Old version ( as downloaded from here ):

_validateFields: function(form) {
                ...... // code removed for the sake of brevity, but enough include to show context.

    if (errorFound) {
        if (options.scroll) {
            var destination=first_err.offset().top; // This is at around line 371
            var fixleft = first_err.offset().left;

New version:

_validateFields: function(form) {
                ...... // code removed for the sake of brevity, but enough include to show context.

    if (errorFound) {
        if (options.scroll) {
            var destination= form.scrollTop() + ( first_err.offset().top - form.position().top ) - (form.height()/2 ) + ( first_err.height()/2 ); // This is at around line 371
            var fixleft = first_err.offset().left;

There might be a better fix, and this might not work in all cases, but it works in some of my cases. It is still slightly off, but now it does not look as bad.

Answer 3

One Solution is to use the option scrollOffset. Example :

$("#form").validationEngine('attach',{autoHidePrompt:true,autoHideDelay: 1000,fadeDuration: 200,scrollOffset:200});

Answer 4

I do not know whether the end is asked but it seems to me that you have a bad added validations. I mean the place where the displays. Try to change the css styles, especially if you see the validation set "position: absolute", if it does change. Check the position of the element in the page. See what a page element is your validator. $ (yourVali). parent (). I hope that helped.

And about scrolling u have this link. Should help. When form is validated, how to SCROLL to the first error instead of jumping?

Answer 5

In jquery validationengine 2.6.2, there is an option called scrollOffset. You can set it to a value equal to the banner's height (or height of any fixed position elements at the top.)