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. 如果单击提交按钮，则容器（跨度）会显示第一条错误消息，无论关注哪个字段。
  2. 使用 Tab 键聚焦在字段上效果很好（URL 字段除外），但是用鼠标聚焦并不能正确更新 span 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：

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

那只是因为你已经硬编码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);
        }
    });
});
于 2012-11-19T15:00:00.870 回答