如何將錯誤消息和自定義圖像添加到使用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; 
}