如何将错误消息和自定义图像添加到使用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; 
}