jQuery Validate 不一次显示所有错误消息，一次只显示一个

Question

I've searched the web and read through the jQuery Validate Docs and I'm not finding out what I'm doing wrong.

I have a form in a modal that is using jQuery Validate and everything works now. When I try to submit the form without the required fields, the text boxes turn red. However only one error message pops up, it looks like this:

When I click on the other textbox 's (ie: from the security question textbox to the password textbox ) the error message for the text box pops up and I click into, but the other textbox 's error message goes away.

It should show " Answer Required " and " Password Required " in the error message div . I have tried using the Validate plugin's errorPlacement , groups , and other things without success.

My script looks like this:

  $('#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();
                        }
                    });

My HTML looks like this:

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

When I inspect element on the error that does pop up, none of the other errors are there, only the one is there. I have a sneaking suspicion I'm doing something wrong with the errorPlacement part, but I've played with that and can't get anything to work.

Any help is appreciated.

Thanks!

Answer 1

That's because you are overwriting the previous message with a new message. One element only has one .innerHTML property. errorPlacement is called once for each error. Each time the method is called, the innerHTML of the qaErrorLabel element is replaced with a new content. That's why you see only one message printed on the screen.

Answer 2

Here is exactly what I did to fix the error. I changed .html to .append . However by doing this the errors are not on a new line, they are right next to each other like this:

My first error message.Mysecond error message.

Rather than this:

My first error message.

My second error message.

So to fix that I changed the code to look like this:

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