Question

简化案例是我有一个包含两个字段的表单，一个是邮政编码，另一个是电子邮件地址。

它们由包含以下内容的编辑模型支持：

[Required(ErrorMessage = "Mandatory")]
[Range(10000, 99999, ErrorMessage = "Error bla bla...")]
public string ZipCode{ get; set; }

[Required(ErrorMessage = "Mandatory", AllowEmptyStrings = false)]
[StringLength(64, ErrorMessage = "Error bla bla")]
[RegularExpression(EmailRegEx, ErrorMessage = "Error bla bla")] //EmailRegEx is a const string
public string ContactEmail { get; set; }

这是问题所在。单击提交按钮后触发验证并在邮政编码字段中找到错误时，焦点将设置在无效字段上。但是，当带有正则表达式的电子邮件失败时，焦点仍然在提交按钮上。这是在Chrome 31，Win7中测试的。

我正在使用jQuery Validation Plugin - v1.11.1和jquery.validate.unobtrusive.js（MVC4）。我也试过这个，挂钩到事件处理程序，但它也不起作用：

$(document).ready(function () {
        $("#myForm").on('invalid-form.validate',
            function (form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    validator.errorList[0].element.focus();
                }
            }
        );
    });

如果在单击提交按钮时包含无效输入的话，如何使用正则表达式数据注释验证属性创建字段以获得焦点？

Answer 1

我最终解决了这个问题。问题是出现错误输入的错误消息会改变按钮的位置。因此，点击实际上没有按下按钮，它会击中背景，然后将焦点放在那里，而不是放在错误的输入字段上。

首先应该通过使用不会在验证错误上重新定位元素的设计来避免这种情况。

使用正则表达式进行ASP MVC4不显眼的验证不会将焦点设置在无效字段上

1 个答案: