Question

好的，

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

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

以下是一些表格：

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

我假设我需要在输入上放置所需的类??

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

我在正确的地方寻找吗？

谢谢！

Answer 1

所有这些解决方案似乎都比他们需要的更复杂。这是一个简单的解决方案。默认情况下，.error会添加到无效字段中。因此，我们需要做的第一件事就是设计风格，以便将边框和背景更改为不同的红色：

.error {
    border-color: #cd0a0a !important;
    background: #fef1ec !important;
}

然后，在您的JavaScript中：

$(function() {
    $("#donate_form").validate({
        errorPlacement: $.noop
    });
});

errorPlacement选项是validate插件允许您覆盖错误消息的放置方式。在这种情况下，我们只是让它什么都不做，因此没有创建错误消息。

Answer 2

我理解你想要实现的目标;我有相同的要求，但在尝试实现它时遇到了严重的困难，但我做到了。方法如下：

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

.errorHighlight { border: 2px solid #CC0000; } .textinput {border: 1px silver solid;}
在设计时，我将“textinput”类应用于我的文本输入字段：<input type="text" class="textinput" />

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

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

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

希望这有帮助。

Answer 3

您可以在errorPlacement中仅提取错误消息：并将其附加到您喜欢的任何内容中，如下所示：

errorPlacement: function(error, element) {
    $('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg.
}

Answer 4

尝试：

$(function() {
    $("#donate_form").validate({
        errorPlacement: $.noop
    });
});

Answer 5

我不知道这是否是正确的方法，但我们使用：

jQuery.validator.messages.required = '';

这会抑制错误消息并离开输入边框。

实际上，jQuery Plugin文档指的是这样做的一个例子，所以我猜这是接受的方法..

自定义消息显示：没有为所需方法显示消息，仅针对类型错误（如错误的电子邮件格式）;摘要显示在顶部（“您错过了12个字段。它们已在下面突出显示。”）

如何使用jquery.validation插件不将error元素显示为标签

5 个答案: