html5 jquery设置vaild,jquery.validate.js自定义表单验证
$(document).ready(function() {
//在下列位置输入页面加载的逻辑代码
$("#inputForm").validate({
rules: {
seq: {range: [0,100]}
},
submitHandler : function(form) {
loading('正在提交，请稍等...');
form.submit();
},
errorContainer : "#messageBox",
errorPlacement : function(error, element) {
$("#messageBox").text("输入有误，请先更正。");
if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
error.appendTo(element.parent().parent());
} else {
error.insertAfter(element);
}
}
});
});
$.validator.setDefaults({
submitHandler:function(form){
form.submit();//提交时拦截
},
errorPlacement: function(error, element) {
error.addClass('tooltips tooltips-inner arrow-left');
if (element.is(":radio")){
error.appendTo(element.parent().parent());
}else if (element.is(":checkbox")){
error.appendTo(element.parent().parent());
}else{
error.insertAfter(element);
}
var pos = $.extend({}, element.offset(), {
element.outerWidth()
, height: element.outerHeight()
}),
actualWidth = error.outerWidth(),
actualHeight = error.outerHeight();
if((pos.top - actualHeight)<0){actualHeight=0;pos.width+=10;}//如果输入框距离顶端为0情况把提示放右边
if(element.parents(".blockPage").attr("class")=="blockUI blockMsg blockPage"){//如果是弹出框的，那么设置如下
error.css({display:'block',opacity:'0.6' ,left:300,top:pos.top - $(document).scrollTop() - actualHeight - 100, "border-left": '0px'});
}
else if (element.is(":radio")){//类型为radio的显示如下
error.css({display:'block',opacity:'0.6',top: pos.top - actualHeight, left: pos.left + pos.width / 2 });
}else{//其他均为以下显示
error.css({display:'block',opacity:'0.6',top: pos.top - actualHeight, left: pos.left + pos.width-10 });
}
}
});
jquery.validate.css:
input.error {
border: 1px solid red !important;
}
label.error {
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: red;
}
span.error {
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: red;
}
label.checked {
}
.tooltips {
position: absolute;
z-index: 10200;
display: block;
visibility: visible;
padding: 5px;
font-size: 11px;
opacity: 0;
filter: alpha(opacity=0);
}
.tooltips-inner {
max- 300px;
padding: 0px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 6px;
}
form input.error{
color:#F00;
border: 1px solid #CE7979;
background:#FFF7FA;
}
form label.error{
color:#F00;
}
.arrow-left
{
border-bottom: 10px solid #000000;
border-left: 10px solid #ffffff;
}