jQuery 验证插件不会隐藏错误显示后

Question

我已经搜索和阅读（不仅仅是在SO上），但似乎找不到这个问题的解决方案。基本上，发生的事情是 jQuery 验证插件（根据文档）应该隐藏在其配置中设置的 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 方面。预先感谢您的阅读以及你们可以提供的任何帮助。

Answer 1

您正在做的是将错误元素插入到预定义的 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/