css-jQuery validate插件显示后不会隐藏错误

我已经搜索并阅读(不仅限于SO),但似乎找不到解决此问题的方法.基本上,正在发生的事情是jQuery validate插件(根据文档)应隐藏其配置中设置的errorContainer.不幸的是,它不是隐藏它,而是删除内容.

为了重现问题,只需在字段中输入非电子邮件值,然后单击页面上的其他位置.您应该看到错误消息出现.现在进入并删除值,然后观察发生了什么.错误消息消失但容器未隐藏,并且由于已设置样式(边框/背景/等),即使在纠正错误后仍可以看到该错误消息.

此div的相关CSS：

div#mailform div#error {
     font-size: 10px;
     width: 288px;
     text-align: center;
     display: inline;
     float: left;
     position: fixed;
     z-index: 1;
     padding: 2px;
     margin-left: 6px;
     background-color: #fcd6cf;
     border: 1px solid #bb1124;
     display: none;
}

我正在使用的jQuery,包括我正在使用的另一个函数来处理字段的默认值(已经通过测试禁用了另一个函数,以查看它是否干扰了显示/隐藏)：

$.fn.search = function() {
 return this.focus(function() {
  if( this.value == this.defaultValue ) {
   this.value = "";
  }
 }).blur(function() {
  if( !this.value.length ) {
   this.value = this.defaultValue;
  }
 });
};

$("#email").search();


$("#subscribeform").validate({
 errorContainer: "#error",errorLabelContainer: "#error",errorClass: "invalid",rules: {
  email: {
   email: true
  },},messages: {
  name: "Please specify your name",email: {
    email: "Please enter a valid email address."
  }
 }
});

根据位于http://docs.jquery.com/Plugins/Validation/validate#toptions的验证插件文档,errorContainer参数“使用附加容器存储错误消息.当发生错误时,显示并隐藏作为errorContainer给出的元素.” (我的重点).但这显然没有发生！

所以我很困惑,并渴望找出我的代码出了什么问题,以便我能够克服这个问题并提高PHP的一面.在此先感谢您的阅读和大家的帮助.

最佳答案

您正在做的是将error元素插入到预定义的div中.显示和隐藏了错误元素,但未显示错误元素的父元素.尝试以下方法：

HTML：

<form id="subscribeform" name="subscribeform" action="mailform.php" method="post">
    <div id="mailform">
        <div id="desc">Stay informed with the latest news from the Foundation: </div>     
        <input type="text" id="email" name="email" placeholder="Enter email address" value="Enter email address"/>
        <input type="image" src="images/sendbutton.jpg" id="sendbutton" name="sendbutton" />
    </div>
</form>

CSS：

div.error { /* the .error class is automatically assigned by the plug-in */
     font-size: 10px;
     width: 288px;
     text-align: center;
     display: inline;
     float: left;
     position: fixed;
     z-index: 1;
     padding: 2px;
     margin-left: 6px;
     background-color: #fcd6cf;
     border: 1px solid #bb1124;
     display: none;
}

最后是jQuery：

$("#subscribeform").validate({
    errorElement: "div",errorPlacement: function(error,element) {
        error.insertBefore($("#desc"));
    },rules: {
        email: {
            email: true
        },messages: {
        name: "Please specify your name",email: {
            email: "Please enter a valid email address."
        }
    }
});

希望这可以帮助！

编辑

这是一个实时的JSFiddle示例：http://jsfiddle.net/SvWJ3/

css-jQuery validate插件显示后不会隐藏错误

相关文章