Question

我已在网上搜索并阅读了jQuery Validate Docs，而且我没有发现我做错了什么。

我有一个使用jQuery Validate的模态中的表单，现在一切正常。当我尝试提交没有必填字段的表单时，文本框变为红色。但是只弹出一条错误消息，如下所示：

当我点击其他textbox时（即：从安全问题textbox到密码textbox），会弹出文本框的错误消息，我点击进入，但其他textbox的错误消息消失了。

它应该显示＆＃34; 需要回答＆＃34;和＆＃34; 需要密码＆＃34;在错误消息div中。我尝试过使用验证插件＆＃39; errorPlacement，groups等其他内容但没有成功。

我的脚本如下所示：

  $('#QuestionAnswer').validate({
                        rules: {
                            question: {
                                required: true,
                                notEqual: '#answer'
                            },
                            answer: {
                                required: true
                            },
                            password: {
                                required: true
                            }
                        },
                        messages: {
                            question: {
                                required: "Question Required",
                                notEqual: 'Question cannot be the same as Answer'
                            },
                            answer: {
                                required: "Answer Required"
                            },
                            password: {
                                required: "Please enter the user's password"
                        errorPlacement: function (error, element) {
                            $("#qaErrorLabel").html(error);
                            $("#qaErrorDiv").show();
                        }
                    });

我的HTML看起来像这样：

    <div id="qaModaldiv" style="display:none;">
        @using (Html.BeginForm("QuestionAnswer", "Controller", FormMethod.Post, new
{
    id = "QuestionAnswer",
    Name = "QuestionAnswer"
}))
{
            <div id="errorMsgCenter" style="font-size:12px;">
                @Html.ValidationSummary()

            </div>
            <div id="qaErrorDiv" class="error" style="font-size: 12px; display:none;">
                <label id="qaErrorLabel" class="validation-summary-errors"></label>
            </div>
            <div class="panel" style="margin:25px;">

                <table>
                    <tr>
                        <td>Security Question:</td>
                        <td> <input type="text" style="width:250px;" name="question" id="question" value="@Model.Question" maxlength="64" /></td>
                    </tr>
                    <tr>
                        <td>Security Answer: </td>
                        <td> <input type="text" style="width:250px;" name="answer" id="answer" maxlength="64" /></td>
                    </tr>
                    <tr>
                        <td>User's Password: </td>
                        <td> <input type="password" name="password" id="password" /></td>
                    </tr>

                </table>
            </div>
}

当我检查弹出错误的元素时，没有其他错误存在，只有那个存在。我怀疑我在errorPlacement部分做错了什么，但我已经玩过这个并且无法正常工作。

感谢任何帮助。

谢谢！

Answer 1

那是因为您用新邮件覆盖了上一条消息。一个元素只有一个.innerHTML属性。每个错误都会调用errorPlacement一次。每次调用该方法时，innerHTML元素的qaErrorLabel都将替换为新内容。这就是为什么你只看到屏幕上印有一条信息的原因。

Answer 2

这正是我为修复错误所做的工作。我将.html更改为.append。但是，通过这样做，错误不在新行上，它们就像这样：

我的第一条错误消息.Mysecond错误消息。

而不是：

我的第一条错误消息。

我的第二条错误消息。

所以要解决这个问题，我将代码更改为：

                    messages: {
                        question: {
                            required: "Question Required<br/>",
                            notEqual: 'Question cannot be the same as Answer<br/>'
                        },
                        answer: {
                            required: "Answer Required<br/>"
                        },
                        password: {
                            required: "Please enter the user's password<br/>"
                    errorPlacement: function (error, element) {
                        $("#qaErrorLabel").append(error);
                        $("#qaErrorDiv").show();

jQuery验证不会一次显示所有错误消息，一次只显示一个

2 个答案: