jquery - 覆盖 jQuery 验证插件中的 focusInvalid 函数

Question

我正在使用jQuery validation plugin我正在尝试使函数 focusInvalid 适应我的需求。提交时(包含无效字段)我想要:

• 滚动到表单的第一个无效元素
• 聚焦此元素

验证在 iPad/iPhone/... 上的行为必须与在桌面上几乎相同，这并不简单，因为人们只能根据用户触发器在 iOS 中聚焦某个元素。但这是一个不同的故事 - 请参阅iPad HTML focus了解更多详情。

我的第一个方法是直接修改 jquery.validate.js 以测试我的适应性。这就是我想到的:

focusInvalid: function() {
    if ( this.settings.focusInvalid ) {
        try {
            var firstInvalidElement = $(this.errorList[0].element);
            $('html,body').scrollTop(firstInvalidElement.offset().top);
            firstInvalidElement.focus()
        } catch ( e ) {
            // ignore IE throwing errors when focusing hidden elements
        }
    }
}

按预期工作。

现在我想在外部覆盖 focusInvalid 的默认行为(如:不修改原始 jQuery 验证源代码)。

这是我迄今为止尝试过的:

• overriding a function within the jquery validation plugin
• How to focus invalid fields with jQuery validate? (第二个答案)

例如:

invalidHandler: function(form, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {                    
        var firstInvalidElement = $(validator.errorList[0].element);
        $('html,body').scrollTop(firstInvalidElement.offset().top);
        firstInvalidElement.focus();
    }
}

不幸的是，如果我按 ENTER 键而不是使用提交按钮，现在就可以提交表单(即使仍然存在无效字段)。如果我删除此自定义 invalidHandler，验证不会有此行为。

你知道这种行为变化是从哪里来的吗？

<小时/>

编辑:

我创建了一个JSFiddle来演示这个问题。为了重现:

• 输入有效的电子邮件地址
• 按 ENTER 键

<小时/>

编辑:

以下是粘贴在 JSFiddle 中的代码片段。

HTML:

<div class="pre-login">
    <form action="login" method="post" id="login">
        <div class="form-group">
            <input type="email" class="form-control" name="email" id="email" placeholder="Email Address" autofocus="autofocus" required />
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="pass" id="pass" placeholder="Password" required />
        </div>
        <button type="submit" class="btn btn-success btn-block">Submit</button>
    </form>
</div>

JavaScript:

$(function () {
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'error-message',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

    $('#login').validate({
        invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {                    
                var firstInvalidElement = $(validator.errorList[0].element);
                $('html,body').scrollTop(firstInvalidElement.offset().top);
                firstInvalidElement.focus();
            }
        },
        rules: {
            email: {
                required: true,
                email: true
            },
            pass: {
                required: true
            }
        }
    });
});

Answer 1

正是 invalidHandler 函数中的这一行导致错误的“按 Enter 提交”，而您仍然有错误，我不知道为什么。

firstInvalidElement.focus();

将 focusInvalid 设置为 false 无效。也许这是一个错误，您应该向开发人员报告 his GitHub page 。 (focusInvalid() 函数在插件的内部 submit 处理函数中使用。)

但是，我不知道为什么你需要在这里这样做。默认的 focusInvalid 处理程序已经将焦点转移到第一个无效字段。即使没有错误，尝试从 invalidHandler 中集中它也是多余的。

演示:https://jsfiddle.net/kfopux67/4/