Question

我有jquery验证工作，以便在验证发生时，错误被放入容器而不是内联。

我的某些非必填字段存在问题。请参阅下面的jsfiddle以获取代码。以下是简要概述：

名称：必填字段
评论：必填字段
网址：不是必需的，但是class ='url'来确保有效的网址
电子邮件：不是必需的，但是class ='email'以确保有效的电子邮件

要重现：
在电子邮件字段中输入值 foo ，或在网址字段和标签中输入
您将按预期收到“电子邮件无效”错误回到现场并清除它并将标签关闭错误将消失，但错误容器仍然存在（您可以在顶部看到红色轮廓）

似乎对于正则表达式类型验证，如果不需要该字段，则当没有值时，它不会重置为忽略验证。如果我进入并实际修复错误，例如发送电子邮件foo@foo.com，一切正常。

如何验证接受空值是否对非必填字段有效？

jsfiddle链接： http://jsfiddle.net/tjans/napf7/

Answer 1

使用errorClass

jQuery的：

$(document).ready(function(){
    $("#commentForm").validate({
        wrapper: 'div',
        errorLabelContainer: '#jserror',
        errorClass: 'errorClass'
    });
  });

然后将border css规则移动到该错误类。必要的风格

#jserror {
    display:none;
}
.errorClass
{
  border:1px solid red;
}

DEMO

Answer 2

您可以覆盖showErrors方法以提供自己的功能。调用defaultShowErrors以获取标准行为。我写了一个快速版本，检查错误对象哈希中的任何错误，并有条件地显示或隐藏容器。 Try it out。如果您使用此解决方案，您可能还需要检查对象枚举的hasOwnProperty。

$("#commentForm").validate({
    wrapper: 'div',
    showErrors: function(errors){
        var hasErrors = false;
        for (var e in errors){
           hasErrors = true;
           break;
        }

        if(hasErrors) $(this.settings.errorLabelContainer).show();
        else $(this.settings.errorLabelContainer).hide();

        this.defaultShowErrors();
    },
    errorLabelContainer: '#jserror'
});

Answer 3

在验证插件中使用取消强调部分。

检查此jsFiddle http://jsfiddle.net/napf7/44/

jquery validate - 当不需要的正则表达式验证发生时，容器不会隐藏

3 个答案: