将 Jquery 错误消息放在单个框（或 div）中答案

【问题标题】：Place Jquery error messages in a single box (or div)将 Jquery 错误消息放在单个框（或 div）中
【发布时间】：2011-01-21 09:21:14
【问题描述】：

我有一个如下的 jquery 自定义表单验证；

jQuery(document).ready(function($) {

    var container = $('div.container');
    var validator = $("#form2").validate({
        errorContainer: container,
        errorLabelContainer: $(container),
        wrapper: 'li',
        meta: "validate"
    });
    $.validator.addMethod(
    "mydate",
    function(value, element) {
        return value.match(/^\d\d?\-\d\d?\-\d\d\d\d$/);
    },
    "Please enter a date in the format dd-mm-yyyy"
    );

});

我正在使用；

jquery-1.4.3.min.js、2.jquery.validate.js 和 3.jquery.metadata.js

这验证了我的表单<form id="form2" method="post" action=""> 和我的表单域

<input id="datepick" name="LDate" class=" {validate:{required:true,mydate : true }}"  style="width: 85px">

空的错误消息（必填的表单字段消息）巧妙地显示在一个单独的容器中，如下所示；

<div class="container2">
        <label for="datepick" class="error">Please enter LDate</label>
</div>

，最初使用样式对用户隐藏

div.container2 {
  display: none
}

并且在出错时可见。

该脚本使用 jquery add 方法检查在表单字段中输入的数据的格式。但是我的自定义错误消息"Please enter a date in the format dd-mm-yyyy" 以列表格式显示在表单字段旁边。我想将此错误消息移至上述<div class="container2">。我怎样才能做到这一点？

提前谢谢.. :)

爆破

【问题讨论】：

标签： jquery jquery-plugins validation jquery-validate

【解决方案1】：

可选“消息”参数的“addMethod”状态文档：

消息（可选）字符串、函数
要显示的默认消息这种方法。可以是创建的函数通过 jQuery.validator.format(value)。未定义时，一个已经存在的消息被使用（方便本地化），否则字段特定的消息必须是已定义。

换行试试：

"Please enter a date in the format dd-mm-yyyy"

到：

function(){
    $('.container2).empty().text("Please enter a date in the format dd-mm-yyyy");
    return '';
}

我怀疑这可以解决问题，但我不能 100% 确定。

【讨论】：

嗨 Neil :) 你的代码修改为 function(){ $('div.container2').empty().text("Please enter date in the format dd-mm-yyyy"); return ''; } 解决了问题.. 谢谢... :)

【解决方案2】：

首先，确保你使用的是 firebug，它的 css 检查器对于这种事情是必不可少的。您可以在页面上实时编辑 css，调整位置并添加新属性，直到您获得正确的 css，然后复制并粘贴到您的代码中......同时确保您已启用并可见 firebug 控制台。

使用 jquery 和 css 的组合：

选项 1： 编辑您正在使用的插件，使 container2 在 container1 中。将 container1 设置为 position:relative; 并将 container2 设置为 position:absolute; 和 top:-60px;（然后您可以调整顶部和左侧）

选项 2： 使用 jquery 获取 container1 div 的位置，console.log($('container1').offset());。然后，您可以使用 jquery 将 container2 div 的位置设置在容器 1 上方，方法是从偏移量中减去 60，然后使用 $('container2').css({position: 'absolute', top: .....});

希望这会有所帮助！

【讨论】：