覆盖功能focusInvalid在jQuery验证插件中

土豆

我正在使用jQuery验证插件,并且正在尝试使功能focusInvalid适应我的需求。在提交(具有无效字段)时,我要:

  • 滚动到表单的第一个无效元素
  • 专注于这个元素

验证在iPad / iPhone / ...上的行为几乎与在台式机上相同,这并不简单,因为只能基于用户触发器将iOS中的某个元素作为焦点。但这是另一回事-有关更多详细信息,请参见iPad HTML焦点

我的第一种方法是直接修改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验证源代码)。

这是我到目前为止尝试过的:

因此,例如:

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键而不是使用Submit按钮,我现在可以提交表单(即使仍然有无效的字段)。如果删除此自定义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
            }
        }
    });
});
活泼的

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

firstInvalidElement.focus();

设置focusInvalidfalse无效。也许应该在开发人员的GitHub页面上向开发人员报告该错误(该focusInvalid()函数在插件的内部submit处理函数中使用。)

但是,我不知道您为什么在这里甚至需要这样做。默认focusInvalid处理程序已经将焦点放在第一个无效字段上。即使没有错误,也尝试从中集中精力是多余的invalidHandler

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery验证插件-“ lettersonly”功能

来自分类Dev

JQuery验证插件部分功能

来自分类Dev

自定义插件中的覆盖功能

来自分类Dev

了解jQuery插件中的功能

来自分类Dev

JQuery插件中的循环功能

来自分类Dev

了解jQuery插件中的功能

来自分类Dev

jQuery自定义插件功能验证选项

来自分类Dev

jQuery验证插件中的异常行为

来自分类Dev

jQuery插件覆盖选项

来自分类Dev

jQuery插件覆盖参数

来自分类Dev

覆盖jQuery验证消息

来自分类Dev

覆盖jQuery验证消息

来自分类Dev

jQuery覆盖默认功能

来自分类Dev

(WP)覆盖WP插件公共功能

来自分类Dev

如何修复jquery验证插件中的bug errorPlacement

来自分类Dev

如何在angular.js插件中覆盖控制器功能

来自分类Dev

jQuery验证插件点击按钮

来自分类Dev

jQuery验证插件:成功函数

来自分类Dev

JQuery 验证插件 onclick 链接

来自分类Dev

jQuery范围验证功能

来自分类Dev

使用jQuery验证插件未执行的验证

来自分类Dev

使用jQuery验证插件验证选择

来自分类Dev

jQuery验证插件:验证多个输入文件

来自分类Dev

jQuery验证插件基于模式的验证?

来自分类Dev

jQuery验证插件-不必要的验证

来自分类Dev

如何使用jquery验证插件来验证输入字段中带有点的名称?

来自分类Dev

在jQuery Validate插件中,如何仅验证必填字段为空(不进行语法验证)?

来自分类Dev

如何在jQuery验证插件中为多个最小值验证应用不同的条件?

来自分类Dev

如何使用 jQuery 验证插件在 keyup 上验证非表单元素中的输入