70

我正在尝试使用 div 而不是标签来覆盖默认的错误消息标签。我也看过这篇文章并知道如何去做，但我对 CSS 的限制一直困扰着我。我怎样才能像其中一些示例一样显示它：

Example #1 (Dojo) - 必须输入无效输入才能看到错误显示
Example #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;  
    }

更新：

好的，我现在正在使用此代码，但是弹出窗口上的图像和位置大于边框，可以将其调整为动态高度吗？

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

7 回答 7

187

您可以使用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);
        }

    });
});

您可以使用 left 和 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 文档以获取更多选项。

这是我使用的css。结果看起来与您想要的完全一样。使用尽可能少的 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;
}

这是您需要的背景图片：

替代文字
（来源：scriptiny.com）

如果您希望在一组选项或字段之后显示错误消息。然后将一个容器内的所有这些元素分组为“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;
}

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

然后给容器一个宽度（这个很重要）

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

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

于 2009-05-16T21:55:02.717 回答
3

我使用jQuery BeautyTips来实现你所说的小气泡效果。我不使用 Validation 插件，所以我真的帮不上什么忙，但是很容易设计和显示 BeautyTips。你应该调查一下。恐怕它不像 CSS 规则那么简单，因为您需要使用 canvas 元素并包含一个额外的 javascript 文件，以便 IE 使用它。

于 2009-05-15T22:58:42.227 回答
2

一些东西：

首先，我认为您真的不需要对无线电字段集进行验证错误，因为您可以默认检查其中一个字段。大多数人宁愿纠正一些东西，然后提供一些东西。例如：

   Age: (*) 12 - 18 | () 19 - 30 | 31 - 50

更有可能更改为正确答案，因为该人不希望它变为默认值。如果他们看到它空白，他们更有可能认为“不关你的事”并跳过它。

其次，我能够在没有任何定位属性的情况下获得我认为您想要的效果。您只需将 padding-right 添加到表单（或表单的 div 等），为您的错误提供足够的空间，并确保您的错误适合该区域。然后，您有一个名为“error”的预先设置的css类，并将其设置为具有大约输入字段高度的负边距顶部和大约从左侧到填充右侧的距离的左侧边距应该开始。我试过了，它不是很好，但它适用于三个属性并且不需要浮点数或绝对值：

   <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>
于 2009-05-21T09:31:04.810 回答
2

不幸的是，我无法评论我的新手声誉，但我有一个解决屏幕变黑问题的解决方案，或者至少这对我有用。不要在 errorPlacement 函数内设置包装器类，而是在设置包装器类型时立即设置它。

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

});

我假设这样做可以让验证器知道要删除哪些 div 元素，而不是全部。为我工作，但我不完全确定为什么，所以如果有人能详细说明这可能会帮助其他人。

于 2010-02-08T22:23:56.377 回答
2

这个答案真的帮助了我，在我的情况下，我必须过滤掉一些元素并对他们的错误 div 进行特殊对齐，

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}
于 2010-05-27T23:45:02.173 回答
1

将以下 css 添加到您的 .validate 方法以更改 css 或功能 

 errorElement: "div",
    wrapper: "div",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertAfter(element)
        error.css('color','red');
    }
于 2014-10-20T05:15:17.373 回答
0

如果您可以提供一些理由说明为什么需要用 div 替换标签，那肯定会有所帮助...

另外，您能否粘贴一个有用的示例（http://dpaste.com/或http://pastebin.com/）

于 2009-05-14T08:29:51.687 回答