1

目的：フォーカスされたフィールドのエラーメッセージをコンテナに表示したいと思います。

私がこれまでにしたこと：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            label.pre {
                display:inline-block;
                width:60px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"
        type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"
        type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("form").validate({
                    messages: {
                        name: "Please specify your name.",
                        email: {
                            required: "We need your email address to contact you.",
                            email: "Your email address must be in the format of name@domain.com."
                        },
                        url: "A valid URL, please.",
                        comment: "Please enter your comment."
                    },
                    showErrors: function (errorMap, errorList) {
                        if (errorList.length) {
                            $("span").html(errorList[0].message);
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
<span></span>
        <form action="#">
            <div>
                <label class="pre" for="entry_0">Name *</label>
                <input type="text" class="required" name="name" id="entry_0">
            </div>
            <div>
                <label class="pre" for="entry_1">Email *</label>
                <input type="text" class="required email" name="email"
                id="entry_1">
            </div>
            <div>
                <label class="pre" for="entry_2">URL</label>
                <input type="text" class="url" name="url" id="entry_2">
            </div>
            <div>
                <textarea class="required" name="comment" id="entry_3" rows="7" cols="35"></textarea>
            </div>
            <div>
                <input type="submit" name="submit" value="Submit">
            </div>
        </form>
    </body>
</html>

デモ： http： //jsfiddle.net/RainLover/32hje/

問題：

  1. 送信ボタンをクリックすると、どのフィールドがフォーカスされていても、container（span）に最初のエラーメッセージが表示されます。
  2. Tabキーを使用してフィールドにフォーカスすることは（URLフィールドを除いて）うまく機能しますが、マウスでフォーカスすることはスパンHTMLを正しく更新しません。
4

3 に答える 3

1

ユーレカ！検証オプションを再確認したところ、次のerrorPlacement代わりに使用する必要があることに気付きました。showErrors

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            label.pre {
                display:inline-block;
                width:60px;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"
        type="text/javascript"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"
        type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("form").validate({
                    messages: {
                        name: "Please specify your name.",
                        email: {
                            required: "We need your email address to contact you.",
                            email: "Your email address must be in the format of name@domain.com."
                        },
                        url: "A valid URL, please.",
                        comment: "Please enter your comment."
                    },
                    errorPlacement: function (error, element) {
                        element.focus(function () {
                            $("span").html(error);
                        }).blur(function () {
                            $("span").html('');
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <form action="#">
<span></span>
            <div>
                <label class="pre" for="entry_0">Name *</label>
                <input type="text" class="required" name="name" id="entry_0">
            </div>
            <div>
                <label class="pre" for="entry_1">Email *</label>
                <input type="text" class="required email" name="email"
                id="entry_1">
            </div>
            <div>
                <label class="pre" for="entry_2">URL</label>
                <input type="text" class="url" name="url" id="entry_2">
            </div>
            <div>
                <textarea class="required" name="comment" id="entry_3" rows="7" cols="35"></textarea>
            </div>
            <div>
                <input type="submit" name="submit" value="Submit">
            </div>
        </form>
    </body>
</html>
于 2012-11-24T08:09:36.677 に答える
0

これは問題番号を修正します。2

$(document).ready(function () {
    $("form").validate({
        messages: {
            name: "Please specify your name.",
            email: {
                required: "We need your email address to contact you.",
                email: "Your email address must be in the format of name@domain.com."
            },
            url: "A valid URL, please.",
            comment: "Please enter your comment."
        },
        showErrors: function (errorMap, errorList) {
            if (errorList.length) {
                $("span").html(errorList[0].message);
            }
        }
    });
    $("form input").focus(function () {
        $(this).valid();
    });
于 2012-11-20T14:08:59.713 に答える
0

問題番号1の場合：

container（span）は、フォーカスされているフィールドに関係なく、最初のエラーメッセージを表示します。

errorList[0].messageこれは、スパンhtmlにハードコーディングしたからです。

問題番号2の場合：

Tabキーを使用してフィールドにフォーカスすることは適切に機能しますが、マウスでフォーカスすることはスパンHTMLを正しく更新しません。

これがあなたのコードの提案されたバリエーションです、それはあなたが提出しようとするとエラーの実行リストを与えるでしょう、あるいはあなたがタブ/クリックオン/オフフィールドをするときそれは問題（もしあれば）を示すはずです、しかし振る舞いはタブスルーに基づいてわずかに異なりますまたはクリックして、それがあなたを助けたり、正しい軌道に乗せることを願っています

$(document).ready(function() {
    $("form").validate({
        messages: {
            name: "Please specify your name.",
            email: {
                required: "We need your email address to contact you.",
                email: "Your email address must be in the format of name@domain.com."
            },
            url: "A valid URL, please.",
            comment: "Please enter your comment."
        },
        showErrors: function(errorMap, errorList) {
            var msg = 'Errors: ';
            $.each(errorList, function(){
                 msg += this.message + '<br />'; });

            $("span").html(msg);
        }
    });
});
于 2012-11-19T15:00:00.870 に答える