css - jQuery 验证插件在显示错误 <div> 后不会隐藏它

标签 css jquery-validate

<分区>

我已经搜索和阅读(不仅仅是关于 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 方面。在此先感谢您的阅读以及你们可以提供的任何帮助。

最佳答案

您所做的是将错误元素插入到预定义的 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 验证插件在显示错误 <div> 后不会隐藏它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3826983/

相关文章:

html - 顶部导航栏的 CSS,其下方区域没有边距和浏览器默认边距

html - 居中文字和图片在同一行

JQuery Validator 插件电话验证

具有自定义属性的 jQuery 验证插件

css - 为什么具有 z-index 值的元素不能覆盖其子元素?

javascript - 有没有办法随机化 CSS/JavaScript 中的填充?

javascript - Firefox 3.6 性能问题和隐藏的提升

jQuery 验证器信用卡号 + 类型匹配

javascript - 如何在选择选项事件jquery中使用jquery验证

jQuery 验证 : change default error message