jQuery验证 - 隐藏错误消息

时间:2011-01-06 12:01:48

标签: jquery validation

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

基本上,我希望带错误的input元素具有错误类,但不要创建包含错误消息的附加元素。

这可能吗?

我刚刚想到了一个CSS解决方法,但它并没有真正解决这个元素仍然被创建的事实?

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

10 个答案:

答案 0 :(得分:71)

将Validator errorPlacement选项与空函数一起使用:

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

这有效地将错误消息放在一边。

答案 1 :(得分:6)

您也可以使用此代码:

jQuery.validator.messages.required = "";

$("selector").validate();

答案 2 :(得分:5)

您可以将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()方法,但事实并非如此。

答案 3 :(得分:3)

我还想隐藏错误消息,并在出错时将我的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>

答案 4 :(得分:2)

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

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

这只是一个菜鸟的解决方法;)但它做到了!

答案 5 :(得分:2)

当我使用CSS来设置jquery validate中的label.valid,label.error样式时,此按钮清除了表单字段中的所有错误和左侧和数据。

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

答案 6 :(得分:1)

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

label.valid {
   display: none;
}

答案 7 :(得分:1)

可能一个更简单和语义上更优选的解决方案是使用css

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

不需要JS,更容易管理,有屏幕阅读器的人实际上会有一些迹象表明他们错过了什么

答案 8 :(得分:1)

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

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

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

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

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

label.error{
   display: none!important;
}

答案 9 :(得分:0)

您可以添加onfocus和onkeyup,以删除错误消息。

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