Javascript jQuery验证：显示聚焦字段错误消息_Javascript_Jquery_Forms_Jquery Validate

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

javascript jquery forms

Javascript jQuery验证：显示聚焦字段错误消息,javascript,jquery,forms,jquery-validate,Javascript,Jquery,Forms,Jquery Validate,目标：我想在容器中显示聚焦字段错误消息到目前为止我所做的事情： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> label.pre { display:inline-block; width:60px;

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

到目前为止我所做的事情：

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


label.pre{
显示：内联块；
宽度：60px；
}
$（文档）.ready（函数（）{
$（“表格”）。验证({
信息：{
姓名：“请指定您的姓名。”，
电邮：{
必填：“我们需要您的电子邮件地址与您联系。”，
电子邮件：“您的电子邮件地址的格式必须为name@domain.com."
},
url:“请输入有效的url。”，
评论：“请输入您的评论。”
},
错误：功能（错误映射、错误列表）{
if（errorList.length）{
$（“span”）.html（错误列表[0]。消息）；
}
}
});
});
名字*
电子邮件*
统一资源定位地址

演示：

问题：

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

如果单击submit按钮，容器（span）将显示第一个错误消息，无论聚焦哪个字段

使用Tab键聚焦字段效果很好（URL字段除外），但使用鼠标聚焦无法正确更新span HTML

对于问题1：

容器（span）显示第一条错误消息，不管是哪条这场比赛很精彩

这只是因为您已将

错误列表[0]硬编码为span html
对于问题2：
使用Tab键聚焦字段效果很好，但使用
鼠标无法正确更新span HTML
这里是您的代码的一个建议变体，当您尝试提交时，它会给出一个错误的运行列表，或者当您在tab/click on/off字段中显示问题（如果有）时，尽管行为会因tab-through或click而略有不同，希望它能帮助您或让您走上正轨
$(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);
        }
    });
});

$（文档）.ready（函数（）{
$（“表格”）。验证({
信息：{
姓名：“请指定您的姓名。”，
电邮：{
必填：“我们需要您的电子邮件地址与您联系。”，
电子邮件：“您的电子邮件地址的格式必须为name@domain.com."
},
url:“请输入有效的url。”，
评论：“请输入您的评论。”
},
错误：功能（错误映射、错误列表）{
var msg='错误：'；
$.each（错误列表，函数（）{
msg+=this.message+'
'；}）；
$（“span”）.html（msg）；
}
});
});
对于问题1：
容器（span）显示第一条错误消息，不管是哪条
这场比赛很精彩
这只是因为您已将错误列表[0]硬编码为span html
对于问题2：
使用Tab键聚焦字段效果很好，但使用
鼠标无法正确更新span HTML
这里是您的代码的一个建议变体，当您尝试提交时，它会给出一个错误的运行列表，或者当您在tab/click on/off字段中显示问题（如果有）时，尽管行为会因tab-through或click而略有不同，希望它能帮助您或让您走上正轨
$(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);
        }
    });
});

$（文档）.ready（函数（）{
$（“表格”）。验证({
信息：{
姓名：“请指定您的姓名。”，
电邮：{
必填：“我们需要您的电子邮件地址与您联系。”，
电子邮件：“您的电子邮件地址的格式必须为name@domain.com."
},
url:“请输入有效的url。”，
评论：“请输入您的评论。”
},
错误：功能（错误映射、错误列表）{
var msg='错误：'；
$.each（错误列表，函数（）{
msg+=this.message+'
'；}）；
$（“span”）.html（msg）；
}
});
});
这修复了问题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();
    });

这修正了问题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();
    });

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


label.pre{
显示：内联块；
宽度：60px；
}
$（文档）.ready（函数（）{
$（“表格”）。验证({
信息：{
姓名：“请指定您的姓名。”，
电邮：{
必填：“我们需要您的电子邮件地址与您联系。”，
电子邮件：“您的电子邮件地址的格式必须为name@domain.com."
},
url:“请输入有效的url。”，
评论：“请输入您的评论。”
},
errorPlacement:函数（错误，元素）{
元素。焦点（函数（）{
$（“span”）.html（错误）；
}).blur（函数（）{
$（“span”）.html（“”）；
});
}
});
});
名字*
电子邮件*
统一资源定位地址