jzaefferer/jquery-validation — Issue #310: focusInvalid for "vertically alligned forms"
Author: ericmartel
Created: 2012-01-30 14:10:19+00:00
State: open

Hi,

I was playing around with jquery-validation and made some local changes, see if you like them / can improve them (I'm a video games developer, I have very little JS experience).

in focusInvalid: I changed it so that if it finds the label the input fits with, it scrolls there... so forms like:

Password:
[ field ]

Will properly display Password: instead of just [ field ] with the error message next to it (gives context to the error).

All I did was cache the input, do as it currently does, try to locate the label and scroll to it:

$formItem = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
.filter(":visible");

$formItem.focus()
// manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
$formItem.trigger("focusin");

$scrollto = $("label[for='" + $formItem.attr("id") + "']");
if($scrollto)
{
$('html, body').animate({
scrollTop: $scrollto.offset().top
}, 500);
}

There must be better ways to do this, but if that's something you find interesting feel free to merge it!

Cheers

Eric