Question

我正在使用jquery验证插件，并且验证工作几乎与我想要的方式一样，但我遇到了一个小问题。

当验证输入字段时，我在输入字段旁边显示一个绿色勾号，表示该字段已成功验证。

如果页面上有错误，我会在页面顶部显示一条错误消息，指出无效字段的数量。

所有这一切都很好。

如果输入字段已修改且不再有效，则会出现此问题。验证删除会删除输入字段旁边的绿色勾号，这是正确的，但它会在输入字段旁边显示默认错误消息。我不想在输入字段旁边显示错误消息。

如果字段无效，如何删除默认错误消息文本？

<script type="text/javascript">

    var j$ = jQuery.noConflict();

    j$(document).ready(function(){

        j$.validator.addMethod("money", function(value, element) {
            return this.optional(element) || /^(\d{1,3})(\.\d{2})$/.test(value);
        }, "Must be in US currency format 0.99");

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

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

        j$('[id$=Credit_Amount]').rules("add",{
            required: true,
            'money': true
        });

        j$('[id$=Credit_Card_Number]').rules("add",{
            required: true,
            creditcard2: function() { return j$('[id$=Credit_Card_Type]').val(); }
        });

        j$('[id$=Verification_Code]').rules("add",{
            required: true,
            digits: true
        }); 

        j$('[id$=Credit_Card_Type]').change(function(){j$('[id$=Details]').validate().element('[id$=Credit_Card_Type]') });
    });
</script>

感谢您的帮助。

Answer 1

解决此问题的主要障碍是您的复选标记包含在相同的 label元素中作为错误消息，其class始终为{{1它是否包含错误消息或复选标记。

我能使这项工作的唯一方法是永久消除动态生成的.error。

1）在label旁边添加了空label，以完全消除对动态生成input的需求。

label

2）修改你的jQuery放置＆amp;从兄弟<div> Email: <input id="email" type="text" name="email" class="required" maxlength="30" /> <label></label> </div>元素中删除复选标记。

label

Working DEMO:

http://jsfiddle.net/tXRjh/13/

删除无效字段上的默认错误消息

1 个答案: