web-dev-qa-db-ja.com

Jquery Validationプラグインのカスタムエラー配置

次のフォームにjQuery Validationプラグインを使用します。

<form id="information" method="post" action="#">

            <fieldset>
                <legend>Please enter your contact details</legend>
                <span id="invalid-name"></span>
                <div id="id">
                    <label for="name">Name: (*)</label>
                    <input type="text" id="name" class="details" name="name" maxlength="50" />
                </div>

                <span id="invalid-email"></span>
                <div id="id">
                    <label for="email">Email: (*)</label>
                    <input type="text" id="email" class="details" name="email" maxlength="50" />
                </div>
            </fieldset>
            <fieldset>
                <legend>Write your question here (*)</legend>
                <span id="invalid-text"></span>
                <textarea  id="text" name="text" rows="8" cols="8"></textarea>


            <div id="submission">
                <input type="submit" id="submit" value="Send" name="send"/>
            </div>
            <p class="required">(*) Required</p>
            </fieldset>

             </form>

スパンタグ内にエラーを配置するにはどうすればよいですか？ （＃無効な名前、＃無効なメール、＃無効なテキスト）

エラーの配置に関するドキュメントを読みましたが、その仕組みがわかりませんでした。各単一エラーを処理し、指定された要素に配置することは可能ですか？

ありがとうございました

jquery-validate
27
Mirko

これは基本的な構造であり、メソッドで任意のセレクタを使用できます。エラー要素と無効な要素があります。

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.prev());
    }
});

または、IDをターゲットにするには、次のようにします。

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo('#invalid-' + element.attr('id'));
    }
});

テストされていませんが、動作するはずです。

34
Dustin Laine

必要な場所にエラーラベルを手動で追加することもできます。私の特定のケースでは、チェックボックスリストなどのより複雑なフォームがあり、挿入または挿入後にレイアウトが壊れてしまいました。これを行う代わりに、指定されたフィールドに既存のラベルタグが存在するかどうかを検証スクリプトが評価して使用するという事実を利用できます。

考慮してください：

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>

次の行を追加します。

<label for="name" class="error" generated="true"></label>

これは標準エラーラベルです。

<div id="id">
    <label for="name">Name: (*)</label>
    <input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<div id="id-error">
    <label for="name" class="error" generated="true"></label>
<div>

jQueryは、新しいラベルを生成するのではなく、このラベルを使用します。申し訳ありませんが、これに関する公式のドキュメントは見つかりませんでしたが、この動作に遭遇した他の投稿を見つけました。

52
Stefan Morrow

.appendToではなく.insertAfterを使用すると動作することがわかりました。

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.insertAfter('#invalid-' + element.attr('id'));
    }
});
3
user383864

バリデータでメタデータ拡張機能を使用しています。（注意、マークアップでdata-meta属性を使用するように設定しています...）

<input ... data=meta='{
    errorLabel: "#someotherid"
    ,validate: {
        name:true
    }
}' >

その後、コードで...

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo($(
            $(element).metadata().errorLabel
        ));
    }
});

私はかなりうまく機能する多くの同様の機能にメタデータを使用しています...注、メタデータの周りに単一の目盛り（アポストロフィ）を使用したため、JSONシリアライザーを使用してサーバー側に注入できますタグのその部分（文字列を二重引用符で囲む必要があります）...リテラルアポが問題になる場合があります（文字列の「 '」を「\ x27」に置き換えます）。

0
Tracker1