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 div.insertAfter(element)return falseerrorPlacement:

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