預設情況下,驗證提示資訊用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();
}
})