jquery.validate使用 - 自定義錯誤信息

自定義錯誤消息的顯示方式

默認情況下，驗證提示信息用label元素來顯示, 並且會添加css class, 通過css可以很方便設置出錯控件以及錯誤信息的顯示方式。

/* 輸入控件驗證出錯*/
form  input.error { border:solid 1px red;}

/* 驗證錯誤提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}

如果想自定義顯示方式，可以修改jquery.validate的默認顯示方式

默認用label顯示錯誤消息，可以通過errorElement屬性來修改
errorElement: 錯誤消息的html標簽

$(".selector").validate
   errorElement: "em"
})

可以在出錯信息外用其他的元素包裝一層。
wrapper: 錯誤消息的外層封裝html標簽

$(".selector").validate({
   wrapper: "li"
})

驗證出錯的css class默認是error，通過errorClass可以修改
errorClass: 驗證出錯時使用的css class

$(".selector").validate({
   errorClass: "invalid"
})

還自定義驗證成功時的動作
success: 如果值是字符串，會當做一個css類，如果是一個函數，則執行該函數

$(".selector").validate({
success: "valid"
})

或者

success: function(label) {
label.html(" ").addClass("checked");
}

還可以把錯誤消息統一到一個容器顯示
errorLabelContainer: 將錯誤消息統一到一個容器顯示

$("#myform").validate({
   errorLabelContainer: "#messageBox"
})

默認情況下，錯誤消息是放在驗證元素后面的，可以自定義錯誤消息的顯示位置

$(".selector").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   }
})

更進一步可以定義一個組，把幾個地方的出錯信息統一放在一個地方，用error Placement控制把出錯信息放在哪里
groups：定義一個組

$(".selector").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "fname" || element.attr("name") == "lname" )
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
   }
})

高亮顯示
highlight: 高亮顯示，默認是添加errorClass
unhighlight: 和highlight對應，反高亮顯示

$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).addClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
  },
  unhighlight: function(element, errorClass) {
     $(element).removeClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
  }
});


或者可以完全自定義錯誤顯示
showErrors: 得到錯誤的顯示句柄

$(".selector").validate({
   showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() 
+ " errors, see details below.");
this.defaultShowErrors();
   }
})