Question

我已经搜索过并阅读过（不只是在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，包括我用来处理字段默认值的另一个函数（已经测试过禁用其他函数以查看是否干扰了show / hide）：

$.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中的validate插件文档，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/

jQuery validate插件在显示后不会隐藏错误<div> </div>

1 个答案: