如何使用jquery.validation插件不将error元素显示为标签

好的，伙计们，

我已经阅读了所有其他post和关于jQuery Validation插件的问题，他们似乎没有我想要做的事情。

我希望显示错误不显示消息，而只是在输入字段周围创建一个红色边框。

这里只是一些forms：

  Name *  
   First    Last   

我假设我需要在输入上放置所需的类？

然后使用CSS隐藏由插件吐出的label.error ？ 我试过了，但没有去。

我在正确的地方寻找吗？

谢谢！

Answer 1

我理解你想要实现的目标; 我有相同的要求，但在尝试实现它时遇到了严重的困难，但我做到了。 这是如何做：

1. 我创建了两个CSS样式类“errorHighlight”和“textinput”，如下所示：

   .errorHighlight { border: 2px solid #CC0000; } .errorHighlight { border: 2px solid #CC0000; } .textinput {border: 1px silver solid;}

2. 在设计时，我将“textinput”类应用于我的文本输入字段：

3. 然后在我的Javascript文件中的jQuery表单validation插件设置中，我在此页面上为所有表单添加了以下常规validation设置：

     $.validator.setDefaults({ errorPlacement: function(error, element) { $(element).attr({"title": error.text()}); }, highlight: function(element){ //$(element).css({"border": "2px solid #CC0000"}); $(element).removeClass("textinput"); $(element).addClass("errorHighlight"); }, unhighlight: function(element){ //$(element).css({"border": "2px solid #CC0000"}); $(element).removeClass("errorHighlight"); $(element).addClass("textinput"); } }); 

现在，只要字段validation失败，就会在元素上调用“ highlight ”回调函数。 “ errorPlacement ”回调函数阻止在错误输入字段之后插入标签的默认操作，而是将错误消息附加到字段的“ title ”属性（可用作工具提示显示的文本源） 。

希望这可以帮助。

Answer 2

所有这些解决方案似乎都比他们需要的更复杂。 这是一个简单的解决方案。 默认情况下， .error会添加到无效字段中。 所以，我们需要做的第一件事就是设计风格，以便将边框和背景更改为不同的红色：

 .error { border-color: #cd0a0a !important; background: #fef1ec !important; } 

然后，在您的JavaScript中：

 $(function() { $("#donate_form").validate({ errorPlacement: $.noop }); }); 

errorPlacement选项是validate插件允许您覆盖错误消息的放置方式。 在这种情况下，我们只是让它什么都不做，因此没有创建错误消息。

Answer 3

尝试：

 $(function() { $("#donate_form").validate({ errorPlacement: $.noop }); }); 

Answer 4

我不知道这是否是正确的方法，但我们使用：

 jQuery.validator.messages.required = ''; 

这会抑制错误消息并离开输入边框。

实际上， jQuery插件文档指的是一个这样做的例子，所以我想这是可接受的方法..

自定义消息显示：没有为所需方法显示消息，仅针对类型错误（如错误的电子邮件格式）; 摘要显示在顶部（“您错过了12个字段。它们已在下面突出显示。”）

Answer 5

您可以在errorPlacement中仅提取错误消息：并将其附加到您喜欢的任何内容，如下所示：

 errorPlacement: function(error, element) { $('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg. }