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

Question

得到一个关于使用jQuery的表单验证的快速问题。所以我有巨大的屁股形式，这是验证和提交正确。我一直遇到的唯一问题是，当我尝试提交它时，表单无效，窗口不会滚动到无效字段。它试图——视图会跳到提交按钮上方半英寸的地方——无效字段实际上不会显示在页面上。关于验证器上的jQuery默认设置，我有以下代码:

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

当验证器运行时，这是focusInvalid()函数定义:

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
                }
            }
        },

最后，表单验证:

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

Answer 1

focus不是滚动页面到特定元素的正确函数。你需要scrollTop，或者类似的函数。关于这个问题有几个问题，我喜欢这个答案，它包含了一个简单的例子，甚至包括了动画的替代解决方案。

Answer 2

谢谢大家!通过让脚本将自定义类添加到无效表单并关注它们，可以解决这个问题。我们尝试了scrollTop，但根本不起作用，所以我们使用了焦点场景。invalidHandler函数代码如下:

    // 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();
        }
    }