jQuery 验证 - 隐藏错误消息答案

【问题标题】：jQuery Validation - Hide Error MessagejQuery 验证 - 隐藏错误消息
【发布时间】：2011-01-06 12:01:48
【问题描述】：

我正在使用 jQuery Validation 插件并希望禁用它创建的 or 元素/容器以显示错误“消息”。

基本上，我希望有错误的输入元素具有错误类，但不创建包含错误消息的附加元素。

这可能吗？

我刚刚想到了一个 CSS 解决方法，但它并不能真正解决元素仍在创建中的事实？

<style>
label.simpleValidationError {display: none !important; }
</style>

【问题讨论】：

jQuery 本身不会显示或创建任何类型的错误消息，您必须更详细地了解您正在做什么以及您正在使用什么来完成此操作
对不起，我正在使用 jQuery 验证插件：bassistance.de/jquery-plugins/jquery-plugin-validation
~ 这仍然不是很多额外的信息，尽管它确实澄清了一些事情。创建验证器时您在做什么（明智的选择）以及如何处理它提供给您的数据？
“我刚刚想到了一个 CSS 解决方法，但它并不能真正解决元素仍在创建中的事实”我不明白它有什么问题——尽管元素是创建后，它会如您所愿隐藏。对吗？

标签： jquery validation

【解决方案1】：

对空函数使用 Validator errorPlacement 选项：

$("selector").validate({ errorPlacement: function(error, element) {} });

这实际上将错误消息放置在任何地方。

【讨论】：

【解决方案2】：

您也可以使用此代码：

jQuery.validator.messages.required = "";

$("selector").validate();

【讨论】：

【解决方案3】：

您可以将showErrors 选项设置为仅执行元素突出显示的函数：

$("selector").validate({
    showErrors: function() {
        if (this.settings.highlight) {
            for (var i = 0; this.errorList[i]; ++i) {
                this.settings.highlight.call(this, this.errorList[i].element,
                    this.settings.errorClass, this.settings.validClass);
            }
        }
        if (this.settings.unhighlight) {
            for (var i = 0, elements = this.validElements(); elements[i]; ++i) {
                this.settings.unhighlight.call(this, elements[i],
                    this.settings.errorClass, this.settings.validClass);
            }
        }
    }
});

不过，这在很大程度上依赖于验证插件的内部结构，因此它可能并不安全。最好的办法是让插件公开defaultHighlightElements() 方法，就像它为defaultShowErrors() 所做的那样，但情况并非如此（目前）。

【讨论】：

【解决方案4】：

我还想隐藏错误消息并将我的input 字段和textarea 变为红色，出错。这是一个小例子：

http://jsfiddle.net/MFRYm/51/

和完整的工作代码，以防 jsfiddle 中断；）

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> Demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>    

      <script type='text/javascript' src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>


  <style type='text/css'>
    .error {
    border: 1px solid red;
}
  </style>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$( "#email_form" ).validate({
      rules: {
        email: {
          required: true,
          email: true
        }
      }, highlight: function(input) {
            $(input).addClass('error');
        },
    errorPlacement: function(error, element){}
});
});//]]>  

</script>


</head>
<body>
<form name="form" id="email_form" method="post" action="#">
    <div class="item" style="clear:left;">
        <label>E Mail *</label>
        <input id="femail" name="email" type="text">
    </div>
    Type invalid email and press Tab key
</form>

</body>

</html>

【讨论】：

【解决方案5】：

我也有同样的问题。我不想要错误消息，只想要需要注意的表单输入的亮点。消息已经像<?php $msj='""';?> 一样是空的，但仍然在标签之后创建了错误元素/容器..

所以为了快速阻止这种情况的发生，我编辑了 jquery.validate.js 文件，将第 697 行 +/-.. 附近的唯一一行声明为 label.insertAfter(element); 的行注释掉了。

这只是一个菜鸟的解决方法；）但它做到了！

【讨论】：

【解决方案6】：

当我在 jquery validate 中使用 CSS 来设置 label.valid、label.error 的样式时，这个按钮清除了所有的错误，并在表单字段中保留了数据。

     <button  onclick="$('label.error').css('display', 'none');return false;">Clear Error </button>

【讨论】：

【解决方案7】：

仅使用 CSS 的最简单解决方案：

label.valid {
   display: none;
}

【讨论】：

【解决方案8】：

可能更简单且语义上更可取的解决方案是使用 css

label.error {
  position:absolute;
  left:20000px;
  top:0;
  }
input.error {
  border:red 1px;
 }

不需要 JS，更易于管理，并且有屏幕阅读器的人实际上会发现他们错过了什么

【讨论】：

屏幕阅读器的优点，我应该经常考虑到这一点！

【解决方案9】：

我有一个由另一个验证库开发的项目，我想添加验证库以使用其功能来检查表单是否有效（使用的验证库没有该功能）

我的解决方案是： 我刚刚通过其 CDN 添加了验证库

并在点击时使用验证功能：

$(document).on('click','#buttonID',function(){
   var form = $( "#formID" );
   form.validate();
   console.log(form.valid());
});

并尝试通过添加 CSS 代码来隐藏 jquery 引发的错误消息：

label.error{
   display: none!important;
}

【讨论】：

【解决方案10】：

您可以添加一个 onfocus 和一个 onkeyup 来删除错误消息。

$("selector").validate({
    onkeyup: false,
    onfocusout: false
});

【讨论】：