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

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选项是验证插件如何覆盖错误消息的放置方式.在这种情况下,我们只是让它什么都不做,因此没有创建错误消息.

Answer 2

我理解你想要实现的目标; 我有相同的要求,但在尝试实现它时遇到了严重的困难,但我做到了.这是如何做:

1. 我创建了两个CSS样式类"errorHighlight"和"textinput",如下所示:

   .errorHighlight { border: 2px solid #CC0000; } .textinput {border: 1px silver solid;}

2. 在设计时,我将"textinput"类应用于我的文本输入字段: <input type="text" class="textinput" />

3. 然后在我的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字段的" "属性(可以用作工具提示显示的文本源).

希望这可以帮助.