0

私は jquery 検証プラグインを使用しており、検証はほぼ希望どおりに機能していますが、小さな問題が 1 つあります。

入力フィールドが検証されると、フィールドが正常に検証されたことを示す入力フィールドの横に緑色のチェック マークが表示されます。

ページにエラーがある場合は、ページの上部に無効なフィールドの数を示すエラー メッセージを表示します。

これはすべて正常に機能します。

この問題は、入力フィールドが変更されて無効になった場合に発生します。検証により、入力フィールドの横にある緑色の目盛りが削除されますが、これは正しいですが、入力フィールドの横にデフォルトのエラー メッセージが表示されます。入力フィールドの横にエラー メッセージを表示したくありません。

フィールドが無効になったときにデフォルトのエラー メッセージ テキストを削除するにはどうすればよいですか?

これは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。

1)この動的に生成された の必要性を完全に排除するためにlabel、 の隣に空の を追加しました。inputlabel

<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 に答える