{"action":"closed","issue":{"url":"https://api.github.com/repos/jquery-validation/jquery-validation/issues/1791","repository_url":"https://api.github.com/repos/jquery-validation/jquery-validation","labels_url":"https://api.github.com/repos/jquery-validation/jquery-validation/issues/1791/labels{/name}","comments_url":"https://api.github.com/repos/jquery-validation/jquery-validation/issues/1791/comments","events_url":"https://api.github.com/repos/jquery-validation/jquery-validation/issues/1791/events","html_url":"https://github.com/jquery-validation/jquery-validation/issues/1791","id":157417423,"node_id":"MDU6SXNzdWUxNTc0MTc0MjM=","number":1791,"title":"Please add reverseElements option to reverse the result of elements(): useful for tooltip errors","user":{"login":"cmanley","id":591285,"node_id":"MDQ6VXNlcjU5MTI4NQ==","avatar_url":"https://avatars2.githubusercontent.com/u/591285?v=4","gravatar_id":"","url":"https://api.github.com/users/cmanley","html_url":"https://github.com/cmanley","followers_url":"https://api.github.com/users/cmanley/followers","following_url":"https://api.github.com/users/cmanley/following{/other_user}","gists_url":"https://api.github.com/users/cmanley/gists{/gist_id}","starred_url":"https://api.github.com/users/cmanley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cmanley/subscriptions","organizations_url":"https://api.github.com/users/cmanley/orgs","repos_url":"https://api.github.com/users/cmanley/repos","events_url":"https://api.github.com/users/cmanley/events{/privacy}","received_events_url":"https://api.github.com/users/cmanley/received_events","type":"User","site_admin":false},"labels":[{"id":80630945,"node_id":"MDU6TGFiZWw4MDYzMDk0NQ==","url":"https://api.github.com/repos/jquery-validation/jquery-validation/labels/NO%20FIDDLE/REPRO","name":"NO FIDDLE/REPRO","color":"fbca04","default":false},{"id":953399112,"node_id":"MDU6TGFiZWw5NTMzOTkxMTI=","url":"https://api.github.com/repos/jquery-validation/jquery-validation/labels/stale","name":"stale","color":"eeeeee","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-05-30T01:38:10Z","updated_at":"2018-06-12T16:08:50Z","closed_at":"2018-06-12T16:08:50Z","author_association":"NONE","body":"### Subject of the issue\n\nWhen using tooltips to display error messages, these are currently created in the same order as the elements occur in the form, because that's how the elements() method returns them. The problem with that is that when tooltips overlap on a single line with multiple inputs, then the right-most tooltips will overlap the left-most tooltips. I solved this by creating a \"reverseElements\" boolean option (default false) and a little array reverse block at the bottom of the elements() method.\n\nThis is the modified method in v1.15.0:\n\n``` javascript\n        elements: function() {\n            var validator = this,\n                rulesCache = {};\n\n            // Select all valid inputs inside the form (no submit or reset buttons)\n            var $elements = $( this.currentForm )\n            .find( \"input, select, textarea, [contenteditable]\" )\n            .not( \":submit, :reset, :image, :disabled\" )\n            .not( this.settings.ignore )\n            .filter( function() {\n                var name = this.name || $( this ).attr( \"name\" ); // For contenteditable\n                if ( !name && validator.settings.debug && window.console ) {\n                    console.error( \"%o has no name assigned\", this );\n                }\n\n                // Set form expando on contenteditable\n                if ( this.hasAttribute( \"contenteditable\" ) ) {\n                    this.form = $( this ).closest( \"form\" )[ 0 ];\n                }\n\n                // Select only the first element for each name, and only those with rules specified\n                if ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {\n                    return false;\n                }\n\n                rulesCache[ name ] = true;\n                return true;\n            } );\n            if (this.settings.reverseElements) {\n                var a = $elements.get();\n                a.reverse();\n                $elements = $(a);\n            }\n            return $elements;\n        },\n```\n\nBelow is how tooltips look when the reverseElements = true, otherwise the rightmost tooltip will block the left one making the error impossible to read and the field covered.\n![tooltips](https://cloud.githubusercontent.com/assets/591285/15637820/404cf268-2619-11e6-9ac2-8d363643453f.png)\nB.t.w. that's generated from a jquery proxy plugin I recently made called validate-tooltipster that combines validate and tooltipster.\n"}}
{"actor":{"display_login":"stale"}}