Первоначально отображались валидаторы диалогового окна jQuery

Question

В проекте MVC 3 я использую модальное диалоговое окно jQuery для сброса пароля и использую валидаторы сайта клиента MVC для проверки.Вот код для моего частичного просмотра пароля для отдыха:

@model Company.Project.Web.Areas.Admin.Models.Users.ResetPasswordViewModel
@using Company.Project.Web.MVC;

@using (Html.BeginForm("ResetPasswordPost", "Users", FormMethod.Post, new { id = "ResetPasswordForm" }))
{
    @Html.HiddenFor(model => model.UserId)

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="editor-label">
            @Html.LabelFor(model => model.Password, new { @class = "editor-label-dialog" })
        </td>
        <td class="editor-field">
            @Html.PasswordFor(model => model.Password, new { @class = "text-box-dialog" })
            <br />
            @Html.ValidationMessageFor(model => model.Password)
        </td>
    </tr>
    <tr>
        <td class="editor-label">
            @Html.LabelFor(model => model.PasswordConfirm, new { @class = "editor-label-dialog" })
        </td>
        <td class="editor-field">
            @Html.PasswordFor(model => model.PasswordConfirm, new { @class = "text-box-dialog" })
            <br />
            @Html.ValidationMessageFor(model => model.PasswordConfirm)
        </td>
    </tr>
</table>
}

Вот мой HTML и JavaScript:

<input id="ResetPasswordButton" type="submit" value="Reset Password" />       
<div id="ResetPasswordDialog" title="Reset Password" style="display: none"></div>

<script type="text/javascript">
    $(function () {
        $("#ResetPasswordDialog").dialog(
        {
            autoOpen: false,
        width: 440,
        height: 240,
        modal: true,
        resizable: false,
        buttons:
        {
            "Submit": function () {
                $.validator.unobtrusive.parse($("#ResetPasswordForm"));

                if ($("#ResetPasswordForm").valid()) {
                    $.post("/Admin/Users/ResetPasswordPost", $("#ResetPasswordForm").serialize(), function () { $("#ResetPasswordDialog").dialog("close"); });
                }
            }
        }
    });

    $("#ResetPasswordButton").click(function () {
        $("#ResetPasswordDialog").html("").load("/Admin/Users/ResetPassword", function () { $("#ResetPasswordDialog").dialog("open"); });
    });
});

Это прекрасно работает, кроме этой строки $.validator.unobtrusive.parse($("#ResetPasswordForm")); заставляет валидаторы отображаться, как только форма всплывает и до того, как пользователь сможет ввести пароли и отправить.Можно ли не отображать валидаторы до тех пор, пока пользователь не попытается отправить форму?

Answer 1

Где-то ваш звонок на $('#ResetPasswordForm').validate();. Где бы это ни было, переместите его в параметр open диалогового окна (поскольку проверка не работает на скрытых формах по умолчанию).

Ваша кнопка отправки не должна делать то, что делает. Вместо этого просто отправьте форму, и пусть проверяющий материал позаботится обо всем остальном. Вы получите что-то вроде этого:

$("#ResetPasswordDialog").dialog(
        { //your options
        buttons: {
          "Submit": function() {$('#ResetPasswordForm').submit(); }
        },
        open: function(){
            var dialog = $(this);
            $("#ResetPasswordDialog").validate({
                 submitHandler:function(){
                    //do your post here then close the dialog with the below code
                    dialog.dialog('close');
                 }
            });
        }
    }
);

И это будет примерно так: http://jsfiddle.net/ryleyb/xSNZ4/