如何使用jquery验证插件将错误消息和自定义图像添加到错误字段

时间:2011-11-11 01:26:31

标签: jquery validation jquery-plugins

我正在使用jquery验证插件(我相当新),如果字段出错,我需要将错误消息与标签旁边的另一个自定义图像一起显示。

这就是我目前的情况:

messages: {
    fname: "Enter your firstname", 
        lname: "Enter your lastname"
},
errorPlacement: function(error, element) {
        error.appendTo( element.parent("td").next());

},

如何添加代码以附加带有文本的图像?

1 个答案:

答案 0 :(得分:0)

以下是example

这些示例的代码

// extend the current rules with new groovy ones

    // this one requires the text "buga", we define a default message, too
    $.validator.addMethod("buga", function(value) {
        return value == "buga";
    }, 'Please enter "buga"!');

    // this one requires the value to be the same as the first parameter
    $.validator.methods.equal = function(value, element, param) {
        return value == param;
    };

    $().ready(function() {
        var validator = $("#texttests").bind("invalid-form.validate", function() {
            $("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
        }).validate({
            debug: true,
            errorElement: "em",
            errorContainer: $("#warning, #summary"),
            errorPlacement: function(error, element) {
                error.appendTo( element.parent("td").next("td") );
            },
            success: function(label) {
                label.text("ok!").addClass("success");
            },
            rules: {
                number: {
                    required:true,
                    minlength:3,
                    maxlength:15,
                    number:true 
                },
                secret: "buga",
                math: {
                    equal: 11   
                }
            }
        });

    });

也是CSS的一部分

em.error {
  background: url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}