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

Question

我正在使用 jquery 验证插件（我很新），如果字段出错，我需要在标签旁边显示错误消息以及另一个自定义图像。

这是我目前拥有的：

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

},

如何添加代码以将图像附加到文本中？

Answer 1

这里是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;
}