Question

我有一个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 methord检查在表单字段中输入的数据的格式。但我的自定义错误消息"Please enter a date in the format dd-mm-yyyy"以列表格式显示在表单字段旁边。我想将此错误消息移至上面的<div class="container2">。我怎么能这样做？

提前致谢.. :)）

blasteralfred

Answer 1

首先，确保你使用的是萤火虫，它的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通过从偏移中减去say 60然后使用$('container2').css({position: 'absolute', top: .....});

来将container2 div的位置设置在容器1之上

希望这有帮助！

Answer 2

“addMethod”的文档声明了可选的“message”参数：

message（可选）字符串，功能
要显示的默认消息这种方法。可以是创建的功能通过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 '';
}

我怀疑这会解决问题，但我不是百分百肯定。

将Jquery错误消息放在一个框（或div）中

2 个答案: