jquery-validation - 04 -错误样式

jquery-validation支持自定义错误样式，包括如下

• 自定义错误样式
• 统一存放错误
• 定义错误位置
• 定义验证通过的样式

 jquery validation－ 错误样式概述

在验证出现错误后，jquery-validation会做如下操作

• 如果有errorContainer，在errorCotainer中显示错误(统一显示)
• 如果没有errorContainer,在input后面添加errorElement，样式是errorClass

默认值如下

规则	描述	默认值
errorClass	错误类	error
errorElement	错误元素	label
errorContainer	容器，同一显示错误信息	无
errorlabelcontainer	用于统一显示错误信息	无
wrapper	包裹每条错误	无

 自定义错误样式

只需要提供label.error、input.error和.error就可以

input.error { border: 1px solid red; }
label.error {
    background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
    padding-bottom: 2px;
    font-weight: bold;
    color: #EA5200;
}

 统一显示错误

给jQuery.validator.setDefault()提供errorContainer、errorlabelContainer、wrapper。

$.validator.setDefaults({
    // 一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能
    errorContainer: "div.error",
    errorLabelContainer: $("#signupForm div.error"),
    wrapper: "li"
});

 自定义错误位置

设置jQuery.validator.setDefault()的errorPlacement回调就可以

 $.validator.setDefaults({
     // 更改错误位置
     errorPlacement: function(error, element) {
         error.appendTo(element.parent());
     }
 });

成功回调 - 设置成功样式

设置jQuery.validator.setDefault()的success回调。

• 当验证成功，执行success回调。
• 在回调中，设置给label设置successClass和successContent就可以

1️⃣ 设置success回调

$.validator.setDefaults({
	// 定义成功样式
	success: function(label) {
		label.html("符合规则").addClass("checked");
	}
});

2️⃣ 设置成功样式

label.checked {
    color: #1eaec9;
}