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/