最初显示的 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/