jQuery 验证：显示焦点字段错误消息答案

【问题标题】：jQuery validation: display the focused field error messagejQuery 验证：显示焦点字段错误消息
【发布时间】：2012-11-25 21:06:39
【问题描述】：

目标：我想在容器中显示焦点字段错误消息。

到目前为止我做了什么：

<!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/

问题：

如果单击提交按钮，容器（跨度）显示第一个错误消息，无论关注哪个字段。
使用 Tab 键聚焦在字段上效果很好（URL 字段除外），但用鼠标聚焦不能正确更新 span HTML。

【问题讨论】：

让你加载 css.. 不知道你为什么要使用 span 来显示错误..因为 jquery 验证本身就是这样做的.. 它会创建错误容器（label.error），如果有任何错误
@bipen: "不确定你为什么要使用 span 来显示错误" 只显示一条错误消息——与焦点字段相关的一条。

标签： javascript jquery forms jquery-validate

【解决方案1】：

尤里卡！我刚刚重新检查了validate options 并意识到我应该使用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>

【讨论】：

【解决方案2】：

对于问题 1：

容器（跨度）显示第一条错误消息，无论哪个字段被聚焦。

这只是因为您已将 errorList[0].message 硬编码到 span html

对于问题 2：

使用 Tab 键关注字段效果很好，但使用鼠标没有正确更新 span 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);
        }
    });
});

【讨论】：

感谢您的回答！ “那只是因为您将 errorList[0].message 硬编码到 span html”我想知道如何获取焦点字段错误消息并显示它。***“当您尝试提交时，它会给出一个运行中的错误列表" 这不是我想要的——正如我在演示中所说和看到的那样，我只想显示重点字段错误消息。
我玩弄了你的 sn-p 并创建了以下内容：modified demo。一切对我来说似乎都很好，但它仍然不能很好地工作。有什么想法吗？

【解决方案3】：

这解决了问题。 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();
    });

【讨论】：

在焦点上，即使用户没有犯任何错误，它最初也会显示错误消息。