0

我正在使用 jquery 验证插件并试图弄清楚如何删除表单输入旁边的默认错误消息。

这是JSFiddle中的一个示例

我在顶部的 div 中显示无效字段的数量并突出显示我的输入字段。

我要删除的输入“此字段为必填项”旁边的错误消息。如果该字段有效,我想添加一个绿色刻度线,显示该字段已成功验证。

这是我一直在玩弄的脚本:

<script type="text/javascript">

    var j$ = jQuery.noConflict();

    j$(document).ready(function(){
        var validator = j$('[id$=Details]').validate({
            invalidHandler: function() {
                j$("#error-message").html('<img src="{!URLFOR($Resource.event, 'images/error-icon.png')}" width="32" height="32">').append(" Please correct the entries highlighted below. " + validator.numberOfInvalids() + " field(s) are invalid.");
            },
            success: function(label) {
                //label.replaceWith('<img src="{!URLFOR($Resource.event, 'images/success-icon.png')}" width="16" height="16" class="validated">');
            }
        });

        j$('[id$=Email]').rules("add",{
            required: true,
            email: true
        }); 
    });
</script> 

这有助于解释吗?谢谢。

4

1 回答 1

2

默认情况下,jQuery Validate 插件已经自动显示和动态清除错误,所以也许你让这变得比它需要的更复杂。在没有看到您的 HTML 或完全不知道为什么要采用这种方法的情况下,这是一个通用示例,它将为您指明正确的方向。

这可以很容易地修改为显示复选标记而不是背景颜色。

jsFiddle 演示

HTML:

​&lt;form>
    <input type="text" name="myfield" />
    <br/><br/>
    <input type="submit" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery:

$(document).ready(function(){

    $('form').validate({
        rules: {
            myfield: {
                required: true,
                email: true
            }
        }
    });

});​

CSS:

.valid {
    background-color: green;
}
.error {
    background-color: red;
}​​​

编辑: 根据 OP 的 jsFiddle

更改.replaceWith().html()清除#error-message divon success,并.insertAfter(element)在元素旁边放置复选标记。最后,添加return falseerrorPlacement:函数以阻止放置任何错误。

success: function(label, element) {
    label
        .html(
            '<img src="images/success-icon.png" width="16" height="16" class="validated">'
        )
        .insertAfter(element);
    j$("#error-message").text('');
},
errorPlacement: function(error, element) {
    return false;
},

工作演示:http: //jsfiddle.net/jJsSG/34/

于 2012-12-16T17:02:20.103 回答