$(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(), { width: 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-width: 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; }