jQuery validate插件不会隐藏错误< div>显示后 [英] jQuery validate plugin won't hide error <div> after displaying it

问题描述

我搜索和阅读（不只是SO），但似乎找不到这个问题的解决方案。基本上，发生的是，jQuery验证插件（根据文档）应该隐藏在其配置中设置的errorContainer。不幸的是，它不是隐藏它，它只是删除的内容。

I've searched and read (not just on SO) but can't seem to find a solution for this issue. Basically, what is happening is that the jQuery validate plugin is (according to documentation) supposed to hide the errorContainer that is set in its configuration. Unfortunately, it's not hiding it, it's just removing the contents.

为了重现问题，只需在字段中输入一个非电子邮件值，然后单击其他地方在页面上。您应该会看到错误消息出现。现在进入并删除值，并看看会发生什么。错误消息消失，但容器未隐藏，并且由于它的样式（边框/背景/等），即使错误已更正后仍然可以看到。

In order to reproduce the issue, just enter a non-email value in the the field and click somewhere else on the page. You should see the error message appear. Now go in and delete the values, and watch what happens. The error message disappears but the container is not hidden, and since it is styled (border/background/etc) it can still be seen even after the error has been corrected.

这个div的相关CSS：

The relevant CSS for this div:

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包括我使用的另一个函数与字段的默认值（已测试禁用其他函数，以查看是否干扰了显示/隐藏）：

The jQuery I'm using, including another function I'm using to deal with the field's default value (already tested disabling the other function to see if that was interfering with the 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."
  }
 }
});

根据validate插件文档： http://docs.jquery.com/Plugins/Validation/validate#toptions ，errorContainer参数为错误消息使用一个额外的容器。 当errorContainer给出的元素都会在错误发生时显示和隐藏。（我强调）。但是这显然不会发生！

According to the validate plugin documentation at: http://docs.jquery.com/Plugins/Validation/validate#toptions, the errorContainer parameter "Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur." (My emphasis). But that's obviously not happening!

所以我很困惑，渴望找到我的代码出了什么问题，以便我可以通过这个和鞭打PHP侧面。感谢您提前阅读和您可以给予任何帮助。

So I'm puzzled, and eager to find out what's going wrong with my code so that I can get past this and whip up the PHP side of it. Thanks in advance for reading and for any help you guys can give.

推荐答案

您正在做的是插入错误元素一个预定义的div。显示和隐藏错误元素，但不显示错误元素的父元素。请改为尝试：

What you're doing is inserting the error element into a pre-defined div. The error element is shown and hidden, but not the error element's parent. Try this instead:

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：

And finally the 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."
        }
    }
});

希望这有助于！

EDIT

这里是一个现场的JSFiddle示例： http://jsfiddle.net/SvWJ3/

Here's a live JSFiddle example: http://jsfiddle.net/SvWJ3/

这篇关于jQuery validate插件不会隐藏错误< div>显示后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！