使用jquery验证器专注于第一个字段

Question

我正在使用jquery验证器来验证表单字段。对于以下字段：

1. 焦点在第三个字段，即电子邮件2，但我希望专注于第一个字段，即传真。

2. 在文本和其他静态文本之间显示错误消息，因为这里的对齐方式会发生变化。显示消息的最佳方式。

3. 在少数情况下，仅显示错误消息但由于哪个用户不知道错误而无法关注。

代码：

var validator = $("#enrollmentForm").validate({
    errorElement: 'label',
    errorPlacement: function(error, element) {
        error.insertAfter(element);
        element.focus();
    },
});

有人可以提供解决方案吗？

Answer 1

使用

invalidHandler: function(form, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {                    
        validator.errorList[0].element.focus();
    }
} 

Answer 2

您自己的代码导致了您正在描述的问题。

 errorPlacement: function (error, element) {
     error.insertAfter(element);
     element.focus();  // <- this line is causing your whole problem
 },

通过在element.focus中使用errorPlacement，您可以告诉它在评估时正确关注正在评估的元素。如果多个元素一次无效，那么焦点自然会留在最后一个被评估的元素上，因为表单是从上到下进行评估的。

演示由您自己的代码引起的问题：http://jsfiddle.net/6y3k6jtc/

---

删除element.focus()行完全修复了您的代码，因为您允许插件的默认焦点按预期运行。 （默认情况下，插件会自动将焦点放在第一个无效的输入元素上。）

 errorPlacement: function (error, element) {
     error.insertAfter(element);
 },

工作代码的DEMO：http://jsfiddle.net/6y3k6jtc/1/