jQuery重写默认的validation错误信息显示（Css）popup菜单/工具提示
我试图用div而不是标签来搭载默认的错误消息标签。 我也看过这篇文章 ，并得到如何做到这一点，但我对CSS的限制困扰着我。 我怎样才能像这些例子一样显示这个：
示例＃1（Dojo） – 必须input无效input以查看错误显示
例＃2
这是一些覆盖错误标签到div元素的示例代码
$(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div" }); }); 现在我在css的一部分，但在这里是：
div.error { position:absolute; margin-top:-21px; margin-left:150px; border:2px solid #C0C097; background-color:#fff; color:white; padding:3px; text-align:left; z-index:1; color:#333333; font:100% arial,helvetica,clean,sans-serif; font-size:15px; font-weight:bold; }
更新：
好吧，我现在使用这个代码，但popup的图像和位置比边框大，这可以调整为dynamic的高度？
if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') { element = element.parent(); offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox } else { // Error placement for single elements offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); error.css('top', offset.top - (element.height() / 2)); }
CSS是一样的（你的CSS代码）
HTML
<span> <input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/> <label for="radio_P">P</label> <input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/> <label for="radio_S">S</label> </span>
您可以使用errorPlacement选项来覆盖错误消息显示与小css。 因为css本身不足以产生你需要的效果。
$(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div", wrapper: "div", // a wrapper around the error message errorPlacement: function(error, element) { offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); error.css('top', offset.top); } }); });
您可以使用左侧和顶部的CSS属性来显示错误消息的顶部，左侧，右侧或底部的元素。 例如要显示上面的错误：
errorPlacement: function(error, element) { element.before(error); offset = element.offset(); error.css('left', offset.left); error.css('top', offset.top - element.outerHeight()); }
等等。 你可以参考关于CSS的jQuery文档来获得更多的select。
这是我使用的CSS。 结果看起来完全像你想要的。 尽可能less的CSS：
div.message{ background: transparent url(msg_arrow.gif) no-repeat scroll left center; padding-left: 7px; } div.error{ background-color:#F3E6E6; border-color: #924949; border-style: solid solid solid none; border-width: 2px; padding: 5px; }
这里是你需要的背景图片：
替代文字http://sandbox.scriptiny.com/messageshttp://img.dovov.commsg_arrow.gif
如果您希望在一组选项或字段后显示错误消息。 然后将所有这些元素分组在一个容器内，一个'div'或'fieldset'。 例如，为所有的“组”添加一个特殊的类。 并将以下内容添加到errorPlacement函数的开头：
errorPlacement: function(error, element) { if (element.hasClass('group')){ element = element.parent(); } ...// continue as previously explained
如果你只想处理特定的情况，你可以使用attr来代替：
if (element.attr('type') == 'radio'){ element = element.parent(); }
这应该足以使错误消息显示在父元素旁边。
您可能需要将父元素的宽度更改为小于100％。
我试过你的代码，它对我来说工作得很好。 这是一个预览： 
我只是对消息填充进行了非常小的调整，以使其适合该行：
div.error { padding: 2px 5px; }
您可以更改这些数字以增加/减less上/下或左/右的填充。 您还可以将高度和宽度添加到错误消息。 如果仍有问题，请尝试用divreplacespan
<div class="group"> <input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/> <label for="radio_P">P</label> <input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/> <label for="radio_S">S</label> </div>
然后给容器一个宽度（这是非常重要的）
div.group { width: 50px; /* or any other value */ }
关于空白页面。 正如我所说我试过你的代码，它正在为我工作。 这可能是你的代码中的其他内容导致了这个问题。
我使用jQuery BeautyTips来实现你正在谈论的小泡泡效果。 我不使用validation插件，所以我不能真正帮助很多，但很容易风格和显示BeautyTips。 你应该看看它。 这恐怕不像CSS规则那么简单，因为您需要使用canvas元素，并为IE添加一个额外的javascript文件，以便与之相媲美。
一些东西：
首先，我不认为你真的需要无线电领域的validation错误，因为你可以只有一个字段默认选中。 大多数人宁愿纠正一些东西然后提供一些东西 例如：
Age: (*) 12 - 18 | () 19 - 30 | 31 - 50
更有可能被更改为正确的答案，因为人们不希望它进入默认状态。 如果他们认为是空白的，他们更可能会认为“不关你的事”，并跳过它。
其次，我能够得到我想要的效果，而没有任何定位属性。 你只需要在表单（或表单的div）上添加填充，就可以为你的错误提供足够的空间，并确保你的错误适合于这个区域。 然后，你有一个预先设置的CSS类叫“错误”，你把它设置为有一个负的边缘大约是你的input字段的高度和左边距的左边到你的填充的位置应该开始。 我尝试了这一点，它不是很好，但它有三个属性，不需要浮动或绝对：
<style type="text/css"> .error { width: 13em; /* Ensures that the div won't exceed right padding of form */ margin-top: -1.5em; /*Moves the div up to the same level as input */ margin-left: 11em; /*Moves div to the right */ font-size: .9em; /*Makes sure that the error div is smaller than input */ } <form> <label for="name">Name:</label><input id="name" type="textbox" /> <div class="error"><<< This field is required!</div> <label for="numb">Phone:</label><input id="numb" type="textbox" /> <div class="error"><<< This field is required!</div> </form>
不幸的是，我不能评论我的新手声望，但我有一个解决scheme的问题，屏幕空白，或至less这是什么对我有用。 而不是设置errorPlacement函数内的包装类，而是在设置包装types时立即设置。
$('#myForm').validate({ errorElement: "div", wrapper: "div class=\"message\"", errorPlacement: function(error, element) { offset = element.offset(); error.insertBefore(element); //error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth() + 5); error.css('top', offset.top - 3); }
}）;
我假设这样做可以让validation器知道哪些div元素被删除，而不是全部。 为我工作，但我不完全确定为什么，所以如果有人能详细说明，可能帮助其他人。
这个答案真的帮助了我，在我的情况下，我不得不过滤一些元素，并在他们的错误div有特殊的alignment，
errorPlacement:function(error,element) { if (element.attr("id") == "special_element") { // special align } else { // default error scheme error.insertAfter(element); } }
将下面的CSS添加到您的.validate方法来更改CSS或function
errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css('color','red'); }
如果你可以提供一些理由，为什么你需要用div来replace标签，这肯定会有帮助…
另外，你可以粘贴一个有用的样本（ http://dpaste.com/或http://pastebin.com/ ）
;){kind=link}