This project is archived and is in readonly mode.

#514 open
mcfedr

Form.Validation.Inline scrolling problem

Reported by mcfedr | February 17th, 2011 @ 02:32 PM | in 1.4.0.1 (closed)

When validating forms where there is a scrolled div within the element, the inline validator search from the parent of the form for an element to scroll, I would suggest that instead it search from the parent of the field.

--- a/mootools-1.3-more.js
+++ b/mootools-1.3-more.js
@@ -4882,7 +4882,7 @@ Form.Validator.Inline = new Class({
                var result = this.parent(field, force);
                if (((this.options.scrollToErrorsOnSubmit && scroll == null) || scroll) && !result){
                        var failed = document.id(this).getElement('.validation-failed');
-                       var par = document.id(this).getParent();
+                       var par = document.id(field).getParent();
                        while (par != document.body && par.getScrollSize().y == par.getSize().y){
                                par = par.getParent();
                        }

Comments and changes to this ticket

  • mcfedr

    mcfedr February 17th, 2011 @ 02:36 PM

    I see pasting a diff isn't very clear, the line that changed was

    var par = document.id(this).getParent();
    

    and is now

    var par = document.id(field).getParent();
    

    but actually, on further investigation, should be

    var par = document.id(failed).getParent();
    
  • mcfedr

    mcfedr February 17th, 2011 @ 02:45 PM

    Also, ;) this is just what i'm doing for myself, but i am making custom form controls and using validators on hidden form elements to validate them, meaning that mostly i can just use the built in validators. so this have caused this problem, scrolling to the hidden input doesnt go to the right place.
    I have changed that whole little section so it finds the first visible parent of the field, and scrolls to that.
    Also when searching for the parent i check it is not null so that validating disconnected forms doesn't cause errors.

    var failed = document.id(this).getElement('.validation-failed');
    var scrollTo = failed;
    while(scrollTo && !scrollTo.isVisible()) {
        scrollTo = scrollTo.getParent();
    }
    var par = document.id(scrollTo).getParent();
    while (par && par != document.body && par.getScrollSize().y == par.getSize().y){
        par = par.getParent();
    }
    var fx = par.retrieve('$moo:fvScroller');
    if (!fx && window.Fx && Fx.Scroll){
        fx = new Fx.Scroll(par, this.options.scrollFxOptions);
        par.store('$moo:fvScroller', fx);
    }
    if (failed){
        if (fx) fx.toElement(scrollTo);
        else par.scrollTo(par.getScroll().x, failed.getPosition(par).y - 20);
    }
    
  • Arian

    Arian February 25th, 2011 @ 09:29 PM

    • State changed from “new” to “open”
    • Milestone set to 1.4.0.1
    • Milestone order changed from “197563” to “0”

    Also the current implementation doesn't really work in IE. The wrong element gets selected which doesn't like to work with Fx.Scroll...

  • Nico

    Nico February 26th, 2011 @ 10:55 AM

    I propose not to scroll when the element is position visible and axes management also, using this :
    https://mootools.lighthouseapp.com/projects/2706-mootools/tickets/1...

    And :

    validateField: function(field, force, scroll,axes){
            [...]
                if (failed){
                    if (!axes){
                        if(!failed.visible().x && !failed.visible().y){
                            axes=['x', 'y'];
                        }
                        else {
                            if(!failed.visible().x){
                                axes='x';
                            }
                            if(!failed.visible().y){
                                axes='y';
                            }
                        }
                    }
    
                    if (axes){
                        if (fx) fx.toElement(failed,axes);
                        else par.scrollTo(par.getScroll().x, failed.getPosition(par).y - 20);
                    }
                }
         [...]
    

    And manage axes in constructor's options ?

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

People watching this ticket

Referenced by

Pages