jQuery覆盖默认验证错误消息显示（Css）弹出/工具提示，如

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>
jquery  css  popup  tooltip  custom-errors 
— 菲尔·帕福德
source
您还会添加HTML表单代码吗？很难说为什么单凭JavaScript不能使收音机工作。
— 娜迪亚·阿拉姆利
我在答案中添加了更多详细信息和预览。该代码确实有效。如果要自定义错误消息，则可以添加更多的CSS，但基本知识都已存在。
— Nadia Alramli 09年
输入值时，页面将变为空白。我认为这与我建议的更改没有任何关系。如果删除errorPlacement函数，您是否还会得到空白页？如果您这样做，则问题不再与此问题相关。在不查看实际页面的情况下无法告诉发生了什么。或获取更多详细信息。您的榜样对我来说工作得很好。该问题可能是由于其他地方未捕获的javascript错误所致。
— Nadia Alramli，2009年
我确实删除了errorPlacement函数，并且没有它也可以正常工作。我不知所措，因为我想使用您提供的内容，但是它无法正常运行。
— 菲尔·帕福德
嗯，尝试向errorPlacement函数添加警报，并查看页面空白时是否被调用。如果这样不能帮助将函数的内部包装在try / catch中。像这样：try {/ *代码* /} catch（e）{alert（e）;}
— Nadia Alramli 09年

Answers:

186

您可以使用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 */
}

关于空白页。就像我说的那样，我尝试了您的代码，它正在为我工​​作。可能是代码中的其他原因导致了问题。

— 纳迪亚·阿拉姆利（Nadia Alramli）
source
谢谢，我喜欢errorPlacement选项，但是CSS正是我想要的。如果您看一下我给的两个示例链接，我希望看起来像那样。再次感谢。
— 菲尔·帕福德
还有另一件事，当我有一个单选或复选框组时，错误div显示在我需要选择的某些选项上。有没有办法在小组之后显示？
— 菲尔·帕福德
1
@Phill，我想提供帮助。但是最好将此发布为另一个问题。主要是因为如果我再编辑此帖子，它将最终成为社区Wiki。而且注释不适合答案。同样将此问题发布为另一个问题将获得更多关注并可能提供更好的解决方案。乍看一下您发布的链接，看来他们正在努力破解以显示箭头。应该有一个更好的方法。
— Nadia Alramli 09年
2
@Nadia-哇，您真的在这里发布了一个很好的答案。它极大地帮助了我解决类似的问题。您对CSS和jQuery的掌握给我留下了深刻的印象。不错的贡献！
— David Robbins
1
如果是在模式弹出窗口中，则该位置是相对于示例中的文档而言的，否则它将不起作用。我用它来解决这个问题： error.css('left', $(element).position().left + $(element).width() + 10); error.css('top', $(element).position().top);
— kiteloop
3

我使用jQuery BeautyTips来实现您正在谈论的小气泡效果。我不使用Validation插件，所以在那里我帮不上什么忙，但是样式设置和显示BeautyTips很容易。您应该调查一下。恐怕它不像CSS规则那么简单，因为您需要使用canvas元素，并包括一个额外的javascript文件以供IE很好地使用。

— 保罗·贝尔甘蒂诺
source
或者，如果您不想快速自定义气泡的颜色，则可以使用第二个示例这样的背景图像。
— Paolo Bergantino，2009年
我正在研究“美容小贴士”，但无法使其与带有错误显示的验证插件一起使用。还有其他想法吗？
— 菲尔·帕福德
2

一些东西：

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

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

因为该人不希望使用默认答案，因此更有可能更改为正确答案。如果他们认为这是空白，则他们更有可能认为“您的业务无关”而将其跳过。

其次，我可以在没有任何定位属性的情况下获得您认为想要的效果。您只需在表单（或表单的div，无论如何）上添加padding-right即可为错误提供足够的空间，并确保您的错误适合该区域。然后，您预先设置了一个称为“错误”的css类，并将其设置为负的margin-top（大约是您输入字段的高度），而margin-left的范围是从左侧到您的padding-right的距离应该开始。我尝试了一下，虽然不是很好，但是它可以用于三个属性，并且不需要浮点数或绝对值：

   <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>
— 安东尼
source
感谢您的答复，但客户希望将单选按钮空白，并强制用户选择一个选项。我将研究您的CSS :)
— Phill Pafford，2009年
除了收音机和复选框，我喜欢这个，你也可以允许吗？
— 菲尔·帕福德
这在IE6中无法正确显示（Havent请检查其他版本）
— Phill
至于单选框和复选框，这取决于您有一组框（字段集）还是只有一组。如果是一个小组，我建议设置字段集的宽度，以使其离开之前提到的填充，然后让您的错误标志指向整个内容，甚至可以向该字段集添加一个类，以使其在出现时具有边框带有标志，因此用户知道您的意思是该组。...–
— 安东尼
但是您实际上并不需要一个复选框的标志，因为那没有意义。如果对框的答案是“否”，那么它仍然“完成”怎么办。如果您有一组框，并且他们需要检查至少两个框，则再次出现字段集而不是框的错误。
— 安东尼
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元素，而不是所有元素。为我工作，但我不完全确定为什么，所以如果有人可以详细说明，可能会帮助别人很多。

感谢您的文章，看起来过来
— 菲尔Pafford
2

这个答案确实对我有帮助，就我而言，我不得不过滤掉一些元素，并对它们的错误div有特殊的了解，

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}
— 罗德里戈
source
1

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

 errorElement: "div",
    wrapper: "div",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertAfter(element)
        error.css('color','red');
    }
— ajaysoni98292
source
0

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

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

— 魏斯约翰
source
默认操作是将标签放置在有错误的元素旁边，这将导致error元素右侧的元素移动。希望将error元素显示为工具提示，例如将鼠标悬停/浮动在其他元素上的弹出窗口。
— 菲尔·帕福德
抱歉，我不能发布我想要的错误div的图像，但是上面的两个示例都具有与我想要的相似的东西。感谢--Phill
— Phill
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.