0

jqueryバージョン：1.9.0
検証プラグイン：http：//docs.jquery.com/Plugins/Validation

フィールド入力を赤にして、その中にエラーメッセージを表示する効果を実現したいのですが、どうすればよいですか？現時点では、どこにもエラーが表示されていません。検証は機能します。すべて問題ないようです。私のフィールドには同じ値のIDと名前があります...しかし何も起こりませんでした。これは私のコードです：

$(document).ready(function() {
        $("#form").validate({
            rules: {
                username: {
                    remote: {
                        url: '<?php echo URL::base(TRUE, TRUE); ?>form/validate/rules',
                        type: "POST",
                        data: {
                            <?php // some data ?>
                        }
                    }
                },
            },
            messages {
                username {
                        remote: "Fdsfdsfsdfdfs"
                }
            }
        });
});

これは私のHTMLです：

<form action="..." method="post" id="form" accept-charset="utf-8">  <div id="input-text" class="input">
    <label for="username">fdsfsd</label>
    <input 

                type="text"
        name="username"
        id="username"

        value=""
        style="" />
</div>
<div id="input-text" class="input">
    <label for="aaa"></label>
    <input 

                type="text"
        name="aaa"
        id="aaa"

        value=""
        style="" />
</div>
<div id="input-submit" class="input">
    <input 
        type="submit"
        name="submit"
        id=""
                value="submit"
        style="" />
</div>

<script type="text/javascript">
// script from above
</script>
</form><div id="form-errors"></div>

私はこれを試しました：

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().find('div.form-errors'));
    }
});

しかし、どちらも機能しません。ファイアバグに「メソッドが見つかりません」というエラーが表示されます...この問題の解決策が見つかりません。手伝ってもらえますか？私は自分の問題を十分に説明したと思います。

4

1 に答える 1

1

このプラグインで問題が発生した場合は、デバッグをオンにしてヘルプを入手できます。

$("#form").validate({
   debug: true,
   ...rest of the options
});

これは、一般的に問題を診断するのに役立つ場合があります。

「フィールド入力が赤で、その中にエラーメッセージが表示される」ようにしたいとのことです。フィールドがエラー状態の場合、検証プラグインはフィールドに「error」のCSSクラスを与える必要があります（「errorClass」オプションを設定して、必要に応じて別のクラスに変更できます）。したがって、input.errorのスタイルを設定して、赤い境界線などを設定できます。

ただし、フォームフィールド内にエラーメッセージを配置するのはさらに難しいでしょう。まず、フォームフィールドがチェックボックス、ラジオボタン、またはメニューを選択している場合は実行できません。私はテキスト入力フィールドのために行うことができます。しかし、私はそれに反対することをお勧めします。たとえば、「名前」の必須フィールドがある場合、フォームが送信されるとすぐに、名前フィールドが空の場合はエラーに設定されますが、すぐに「このフィールドは必須」の値が与えられますそして突然、エラー状態ではなくなりました。CSSの強調表示が消え、ユーザーは名前フィールドが間違って設定されていることに気付かない場合があります。

あなたはerrorPlacement関数を調査しているように見えますが、invalidHandlerを調査することもできます。「errorPlacement」は、単一のフィールドのエラーを処理します。「invalidHandler」は、通常、フォームに一般的なエラー状態を表示するために使用されます。

errorPlacementに何も設定しない場合、validateプラグインは、エラー状態であるフォームフィールドの後にエラーのクラスを含むラベルを追加します。したがって、一般的に、「label.error」にCSSスタイルを設定するだけでよいことがわかります。例えば：

<style>
    label.error {
        border: 1px solid red;
        color: red;
    }
</style>

お役に立てば幸いです。

于 2013-03-01T02:31:51.130 に答える