Question

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

中的示例

我在顶部的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>

这有助于解释吗？感谢。

Answer 1

默认情况下，jQuery Validate插件已经自动显示并动态清除错误，因此您可能会让它变得比它需要的更复杂。如果没有看到您的HTML或完全知道您采用您的方法的原因，这是一个通用示例，它将指向您正确的方向。

可以轻松修改此选项以显示复选标记而不是背景颜色。

jsFiddle Demo

<强> HTML：

<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 div，并.insertAfter(element)将复选标记放在元素旁边。最后，将return false添加到errorPlacement:函数，以阻止任何错误。

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/

清除输入旁边的错误消息

1 个答案: