0

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

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

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

所有这一切都很好。

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

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

这是关于 jsfiddle 的工作演示

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

谢谢你的帮助。

4

1 回答 1

1

解决此问题的主要障碍是您的复选标记包含在与错误消息相同 label的元素内，并且它class始终.error是包含错误消息还是复选标记。

我能让这个工作的唯一方法是永久消除动态生成的label.

label1）在旁边添加一个空的input，以完全消除对这个动态生成的需要label。

<div>
    Email:
    <input id="email" type="text" name="email" class="required" maxlength="30" />
    <label></label>
</div>

2) 修改您的 jQuery 以放置和删除兄弟label元素的复选标记。 

var j$ = jQuery.noConflict();

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

    var validator = j$("#Details").validate({
        invalidHandler: function(form, validator) {
            j$("#error-message")
                .html('<img src="http://shc.dev1.cs3.force.com/MedicalStaffPayment/resource/1355859689000/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) {
            j$(element).next('label')
                .html('<img src=http://shc.dev1.cs3.force.com/MedicalStaffPayment/resource/1355859689000/event_ver2/images/success-icon.png width="16" height="16" class="validated">');
        },
        errorPlacement: function(error, element) {
            j$(element).next('label').html('');
        }
    });

    j$("#email").rules("add", {
        required: true,
        email: true
    });
});​

工作演示：

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

于 2012-12-19T00:10:17.030 回答