jQuery覆盖默认验证错误消息显示(Css)Popup/Tooltip之类 [英] jQuery override default validation error message display (Css) Popup/Tooltip like

问题描述

我正在尝试使用 div 而不是标签来覆盖默认错误消息标签.我看过
_{(来源:scriptiny.com)}

如果您希望在一组选项或字段之后显示错误消息.然后将一个容器内的所有这些元素分组为div"或fieldset".例如，为所有这些组"添加一个特殊类.并将以下内容添加到 errorPlacement 函数的开头:

errorPlacement: function(error, element) {if (element.hasClass('group')){元素 = element.parent();}...//如前所述继续

如果您只想处理特定情况，可以使用 attr 代替:

if (element.attr('type') == 'radio'){元素 = element.parent();}

这应该足以让错误消息显示在父元素旁边.

您可能需要将父元素的宽度更改为小于 100%.

<小时>

我已经尝试过您的代码，它对我来说非常好用.这是一个预览:

我只是对消息填充做了一个非常小的调整，以使其适合该行:

div.error {填充:2px 5px；}

您可以更改这些数字以增加/减少顶部/底部或左侧/右侧的填充.您还可以在错误消息中添加高度和宽度.如果您仍然遇到问题，请尝试将 span 替换为 div

<div class="group">

然后给容器一个宽度(这个很重要)

div.group {宽度:50px；/* 或任何其他值 */}

关于空白页.正如我所说，我尝试了您的代码，它对我有用.可能是您的代码中的其他内容导致了问题.

I'm trying to over ride the default error message label with a div instead of a label. I have looked at this post as well and get how to do it but my limitations with CSS are haunting me. How can I display this like some of these examples:

Example #1 (Dojo) - Must type invalid input to see error display
Example #2

Here is some example code that overrides the error label to a div element

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

Now I'm at a loss on the css part but here it is:

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;  
    }

UPDATE:

Okay I'm using this code now but the image and the placement on the popup is larger than the border, can this be adjusted to be dynamic is height?

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));
}

the css is the same as below (your css code)

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>

解决方案

You can use the errorPlacement option to override the error message display with little css. Because css on its own will not be enough to produce the effect you need.

$(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);
        }

    });
});

You can play with the left and top css attributes to show the error message on top, left, right or bottom of the element. For example to show the error on the top:

    errorPlacement: function(error, element) {
        element.before(error);
        offset = element.offset();
        error.css('left', offset.left);
        error.css('top', offset.top - element.outerHeight());
    }

And so on. You can refer to jQuery documentation about css for more options.

Here is the css I used. The result looks exactly like the one you want. With as little CSS as possible:

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;
}

And here is the background image you need:

_{(source: scriptiny.com)}

If you want the error message to be displayed after a group of options or fields. Then group all those elements inside one container a 'div' or a 'fieldset'. Add a special class to all of them 'group' for example. And add the following to the begining of the errorPlacement function:

errorPlacement: function(error, element) {
    if (element.hasClass('group')){
        element = element.parent();
    }
    ...// continue as previously explained

If you only want to handle specific cases you can use attr instead:

if (element.attr('type') == 'radio'){
    element = element.parent();
}

That should be enough for the error message to be displayed next to the parent element.

You may need to change the width of the parent element to be less than 100%.

---

I've tried your code and it is working perfectly fine for me. Here is a preview:

I just made a very small adjustment to the message padding to make it fit in the line:

div.error {
    padding: 2px 5px;
}

You can change those numbers to increase/decrease the padding on top/bottom or left/right. You can also add a height and width to the error message. If you are still having issues, try to replace the span with a div

<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>

And then give the container a width (this is very important)

div.group {
    width: 50px; /* or any other value */
}

About the blank page. As I said I tried your code and it is working for me. It might be something else in your code that is causing the issue.

这篇关于jQuery覆盖默认验证错误消息显示(Css)Popup/Tooltip之类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！