表单验证中的jQuery部分无效字段滚动

Question

Got a quick question about a form validation using jQuery. So I have huge-butt form, which is validated and submitted properly. The only problem I keep running into is that when I try to submit it, and the form is invalid, the window does not scroll to the invalid field. It tries to - the view sort of jumps about half an inch above the submit button and that's it - the invalid field is not actually shown on the page. In terms of the jQuery default settings on the validator, I have the following code:

    $.extend($.validator, {
        defaults: {
        messages: {},
        groups: {},
        rules: {},
        errorClass: "error",
        validClass: "valid",
        errorElement: "label",
        focusInvalid: true,
        errorContainer: $([]),
        errorLabelContainer: $([]),
        onsubmit: true,
        ignore: ":hidden",
        ignoreTitle: false,
}

When the validator runs, this is the focusInvalid() function definition:

focusInvalid: function() {
            if ( this.settings.focusInvalid ) {
                try {
                    $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
                    .filter(":visible")
                    .focus()
                    // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
                    .trigger("focusin");
                } catch(e) {
                    // ignore IE throwing errors when focusing hidden elements
                }
            }
        },

Finally, on form validation:

if ( validator.form() ) {
                    if ( validator.pendingRequest ) {
                        validator.formSubmitted = true;
                        return false;
                    }
                    return handle();
                } else {
                    validator.focusInvalid();
                    return false;
                }

Answer 1

focus isn't the correct function for scrolling the page to a particular element. You need scrollTop , or a similar function. There are several questions about this, I like this answer which includes a simple example, and even includes the alternative solution with animation.

Answer 2

Thanks guys! It was fixed by having the script add custom classes to the invalid forms and focusing on them. We tried scrollTop, but that didn't work at all, so we went with a focus scenario. The invalidHandler function code is below for anyone who's interested:

    // invalidHandler to set focus to invalid controls
    invalidHandler: function(event, validator) {
        var $invalidElement = $(validator.errorList[0].element);

        if ($invalidElement.hasClass('chosen-select')) {
            $invalidElement.trigger('chosen:activate');
        } else if ($invalidElement.siblings('ul.token-input-list').length > 0) {
            var $inputToken = $invalidElement.siblings('ul.token-input-list').find('input');
            $inputToken.focus();
        }
    }