在 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?（第 2 个答案）

因此，例如：

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 来演示这个问题。为了重现：

输入有效的电子邮件地址
按回车键

编辑：

这里是粘贴在 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 函数中的这一行导致了错误 "submission on Enter" 而你仍然有错误，我不知道为什么。

firstInvalidElement.focus();

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

但是，我不知道您为什么需要在这里执行此操作。默认的 focusInvalid 处理程序已经将焦点转移到第一个无效字段。即使没有错误，也尝试从 invalidHandler.

中关注它是多余的

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

Answer 2

我知道这是一个非常古老的 post，但它可能会对其他人有所帮助。您只需要将 focusInvalid 设置为 false 并编写一个 invalidHandler 它将专注于第一个错误元素（这里是第一个文本框）

$("form").validate({
    focusInvalid: false,
    invalidHandler: function() {
      $(this).find(":input.error:first").focus();
    }
});

在 jQuery 验证插件中覆盖函数 focusInvalid

Override function focusInvalid in jQuery validation plugin

jquery

jquery-validate