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

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