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/

最初显示的jQuery模式对话框验证器

1 个答案: