jquery validate 添加自定义样式
实现效果:
错误信息的默认位置以及标签
validate插件的默认错误信息插入位置是 要验证的元素的后面,所用的标签是 ,验证不通过时,会给label以及所验证的元素添加 class=error, 验证通过后,label会被隐藏.
先要知道下面这几个方法
1.errorElement:标签名
表示错误信息所用的标签,默认是label
2.errorPlacement:function(error,element) { 修改错误信息的位置 }
error指的是错误信息,如用户名有误,element指的是校验的元素,如用户名输入框,方法体内可以写错误信息出现在校验元素,如:
errorPlacement: function (error, element) { $(element).after(error); },
3.success:function(参数名) { }
参数指的是错误信息的标签,方法体可以写对这个标签的样式的操作.
4.showErrors:function (errorMap, errorList) {}
这里只用到errorMap,errorMap是出错元素的一个键值对的集合, 其中的键是元素name属性的值,值是元素的value.
直接上代码
css代码:
em {font-size:10px; color:red}
em.success {
color:green;
}
js代码:
$(function () {
var pic = '';
//bootstrap的字体图标,这是上面图片中的×
$("#myForm").validate({
rules: {
name: "required",
password: "required"
},
messages: {
name: pic + "用户名不能为空",
password:pic + "密码不能为空"
},
errorElement: "em", //可以用其他标签，记住把样式也对应修改
success: function(em) {
//em指向上面那个错误提示信息标签em
$(em).text("").addClass("glyphicon glyphicon-ok-circle success");
//先清空em元素里的内容,然后添加一个成功的√的字体图标样式,success是一个样式,让这个字体图标变成绿色
},
showErrors:function (errorMap, errorList) {
for (var element in errorMap) {
$("#" + element).next("em").removeClass();
//去除success样式和字体图标,不去除会跟错误信息一起出现
}
this.defaultShowErrors();
//默认的错误信息显示样式
}
})
});
完整html代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
em {
color: red;
font-size: 15px;
}
#myForm {
margin: 20px;
}
em.success { color: green; }
style>
<script src="scripts/jquery-1.8.2.js">script>
<script src="scripts/jquery.validate.js">script>
<script src="scripts/bootstrap.min.js">script>
<script type="text/javascript">
$(function() {
var pic = '';
//bootstrap的字体图标,这是上面图片中的×
$("#myForm").validate({
rules: {
name: "required",
password: "required"
},
messages: {
name: pic + "用户名不能为空",
password: pic + "密码不能为空"
},
errorElement: "em", //可以用其他标签，记住把样式也对应修改
success: function(em) {
//em指向上面那个错误提示信息标签em
$(em).text("").addClass("glyphicon glyphicon-ok-circle success");
//先清空em元素里的内容,然后添加一个成功的√的字体图标样式,success是一个样式,让这个字体图标变成绿色
},
showErrors: function(errorMap, errorList) {
for (var element in errorMap) {
$("#" + element).next("em").removeClass();
//去除success样式和字体图标,不去除会跟错误信息一起出现
}
this.defaultShowErrors();
//默认的错误信息显示样式
}
});
});
script>
head>
<body>
<form id="myForm">
<div>
<label for="name">用户名label>
div>
<div>
<input type="text" name="name" id="name" />
div>
<div>
<label for="password">密码label>
div>
<div>
<input type="text" name="password" id="password" />
div>
<div>
<button type="submit">提交button>
div>
form>
body>
html>