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

Posted 2023-05-09

【中文标题】最初显示的 jQuery 模式对话框验证器

【英文标题】：jQuery modal dialog validators initially displayed

【发布时间】：2012-03-15 04:37:33

【问题描述】：

在 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")); 导致验证器在表单弹出时立即显示并且在用户有机会输入密码并提交之前显示。是否可以在用户尝试提交表单之前不显示验证器？

【参考方案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/

【讨论】：

没有这行 $.validator.unobtrusive.parse($("#ResetPasswordForm"));我在 jquery.validate.min.js 中收到以下错误：无法获取属性“设置”的值：对象为空或未定义如果我在打开的函数中添加该行，我会得到与验证器完全相同的行为打开表单时显示。

在这种情况下，请尝试不同的计划，而不是调用$.validator.unobtrusive.parse 尝试为表单中的每个元素调用$.validator.unobtrusive.parseElement($('#ResetPasswordDialog input').get(0)) 等等。

我决定放弃尝试使用 MVC 数据注释进行验证并使用 jQuery 验证，这给了我想要的行为。