Question

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

到目前为止我做了什么：

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

问题：

如果单击“提交”按钮，容器（span）将显示第一个错误信息，无论哪个领域都被关注。
使用Tab键关注字段效果很好（URL字段除外），但使用鼠标聚焦不能正确更新范围HTML。

Answer 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>

Answer 2

问题1：

容器（span）显示第一条错误消息，无论哪个该领域是重点。

这只是因为你对span html

进行了硬编码errorList[0].message

问题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);
        }
    });
});

Answer 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();
    });

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

3 个答案: