如何不使用jquery.validation插件将错误元素显示为标签 [英] How to not display error element as label with jquery.validation plugin

问题描述

好的，

我已经阅读了jQuery Validation插件的所有其他帖子和问题，他们似乎没有我想要做的。

I have read through all the other posts and question on jQuery Validation plugin and they don't seem to have what I'm looking to do.

我希望显示错误不会随消息显示，而只是在输入字段周围创建一个红色边框。

I would like to have the display error not show with message but just create a red border around the input field instead.

以下是一些形式：

Here is just some of the form:

<form id="donate_form" name="checkoutForm" method="post">
    <label class="desc" id="title0" for="billing_name_first">
    Name
    <span id="req_1" class="req">*</span>
</label>
<div>
    <span class="left">
        <input name="billing.name.first" id="billing_name_first" type="text" class="field text required" value="" tabindex="1" />
        <label for="billing_name_first">First</label>
    </span>
    <span class="right">
        <input name="billing.name.last" id="billing_name_last" type="text" class="field text required" value="" tabindex="2" />
        <label for="billing_name_last">Last</label>
    </span>
</div>

我假设我需要将所需的类放在输入中？

I am assuming that I need to place the class required on the input??

然后用CSS隐藏插件所吐出的 label.error ？我已经试过，但没有去。

Then with CSS hide the label.error which is spit out by the plugin? I've tried that but no go.

我在正确的地方寻找？

谢谢！ / p>

Thanks!

推荐答案

我明白你想达到的目标;我有同样的要求，但试图实现它有严重的困难，但我做到了。以下是这样做的：

I understand what you are trying to achieve; I had the same requirements but had serious difficulties trying to achieve it, but I did. Here's how:

1. 我创建了两个CSS样式类errorHighlight和textinput，如下所示：

1. I created two CSS style classes "errorHighlight" and "textinput", like so:

.errorHighlight {border：2px solid＃CC0000; }
.textinput {border：1px silver solid;}

在设计时，我将textinput类应用于我的文本输入字段：< input type =textclass =textinput/>

At design time, I applied the "textinput" class to my text input fields: <input type="text" class="textinput" />

然后在我的Javascript文件中的jQuery表单验证插件设置中，我为本页面上的所有表单添加了以下常规验证设置：

And then in my jQuery form validation plugin settings inside my Javascript file, I added the following general validation settings for all forms on this page:

        $.validator.setDefaults({
            errorPlacement: function(error, element) {  
                $(element).attr({"title": error.text()});
            },
            highlight: function(element){
                //$(element).css({"border": "2px solid #CC0000"});
                $(element).removeClass("textinput");
                $(element).addClass("errorHighlight");
            },
            unhighlight: function(element){
                //$(element).css({"border": "2px solid #CC0000"});
                $(element).removeClass("errorHighlight");
                $(element).addClass("textinput");
            }
        });

现在，只要字段验证失败， 突出显示在元素上调用回调函数。 errorPlacement 回调函数防止在错误的输入字段后面插入标签的默认操作，而是将错误消息附加到 title 字段的属性（可以用作工具提示显示的文本来源）。

Now, whenever a field fails validation, the "highlight" callback function is called on the element. The "errorPlacement" callback function prevents the default action of inserting a label after the erring input field, instead it appends the error message to the "title" attribute of the field (which can be used as the source of text for a tooltip display).

希望这有帮助。

这篇关于如何不使用jquery.validation插件将错误元素显示为标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！