0

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);
Tony B
  • 915
  • 1
  • 9
  • 24
  • I could not post this above, so posting here: [Figure 3: After submitting form, manually scrolled to first error](https://drive.google.com/file/d/0ByXBOuIPIVA0YnBYdVhJRWV1TGM/edit?usp=sharing) – Tony B Apr 16 '14 at 20:58

5 Answers5

1

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.

Community
  • 1
  • 1
Tony B
  • 915
  • 1
  • 9
  • 24
1

One Solution is to use the option scrollOffset. Example :

$("#form").validationEngine('attach',{autoHidePrompt:true,autoHideDelay: 1000,fadeDuration: 200,scrollOffset:200});
Khalid
  • 111
  • 1
  • 3
0

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?

Community
  • 1
  • 1
kol1991
  • 65
  • 3
  • 13
  • Thanks. The problem is that it scrolls incorrectly. That is actually the only problem. It does scroll the the first error, but the first error is inside the banner at the top. Look at my 3 images if you don't understand. – Tony B Apr 17 '14 at 17:40
  • Also, the [post you mention above](http://stackoverflow.com/questions/9392133/when-form-is-validated-how-to-scroll-to-the-first-error-instead-of-jumping) references a slightly different validation plugin. I am using the [jquery-validation-engine plugin](http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/). It might be based on the plugin that post mentions, but it is slight different. For me, it was easier to implement with my code. – Tony B Apr 17 '14 at 17:46
  • More clarification: It always scrolls to the top of the browser window. So, if the page happens to be designed such that we have a top banner that does not move, and a bottom section that does move/scroll, we have problems with the scrolling, as exemplified in my images. – Tony B Apr 17 '14 at 23:40
0

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.

Tony B
  • 915
  • 1
  • 9
  • 24
0

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

Shijesh GLmn
  • 31
  • 4