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;

}