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或类似的功能。有几个问题，我喜欢this answer，其中包含一个简单的例子，甚至还包括带动画的替代解决方案。

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

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

2 个答案: