jquery.validate自定义验证--成功提示与择要提示

1. 自定义验证--成功提示

1) 添加选项
errorClass: "unchecked",
validClass: "checked",
errorElement: "span",
errorPlacement: function (error, element) {
	if (element.parent().find("span[for=""" + element.attr("id") + """]") != null) {
		element.parent().find("span[for=""" + element.attr("id") + """]").remove();
	}
	error.appendTo(element.parent());
},
success: function (label) {
	label.removeClass("unchecked").addClass("checked");
},
2)设置样式
input.unchecked{border: 1px #E6594E dotted;}
span.checked {
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
  height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid #E6594E;white-space: nowrap;
  text-align: left;color: #E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* #FCEAE8 */
}
span.unchecked {
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
  height: 25px;line-height: 1px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;
  text-align: left;color: #E6594E;background: #FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;          
}


2. 自定义验证--择要提示

1) 添加选项
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: ""li"",
meta: "validate",
errorClass: "unchecked",
validClass: "checked",
2) 设置样式
input.unchecked{border: 1px #E6594E dotted;}
span.checked {
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
  height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid #E6594E;white-space: nowrap;
  text-align: left;color: #E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* #FCEAE8 */
}
span.unchecked {
  padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
  height: 25px;line-height: 1px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;
  text-align: left;color: #E6594E;background: #FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;          
}
div.container {
	background-color: #eee;
	border: 1px solid red;
	margin: 5px;
	padding: 5px;
}
div.container ol li {
	list-style-type: disc;
	margin-left: 20px;
}
div.container { display: none }
.container label.error {
	display: inline;
}
3) 添加择要标识表记标帜
<div class="container">
    <h4>There are serious errors in your form submission, please see below for details.</h4>
    <ul></ul>
</div> 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值