模型验证在 jquery 对话框中不起作用

Question

我正在使用 MVC3 并添加了具有所需属性的模型验证。然后我创建了具有 jquery 对话框（不是 ajax 对话框）的页面。在这种情况下验证不起作用。但如果我把 html 从对话框放到页面上，它就可以正常工作。

有谁知道如何解决问题吗？

这是我的 JavaScript：

$(document).ready(function () { 
  $("#registerDialog").dialog({ autoOpen: false, show: "blind", hide: "explode", modal: true, resizable: false, height: 570, width: 390 });

  $(".headerButton").button(); 
  $(".accountBtn").button(); 
  $('ul').roundabout({ autoplay: 'false', autoplayDuration: 3000 }); 

  $("#registerBtn").click(function () { 
    $("#registerDialog").dialog("open"); return false; }); 
    $("#closeRegisterDialog").click(function () { $("#registerDialog").dialog("close"); 
   }); 

   $("#registerBtnSbmt").click(function () {
     $("#registerForm").submit(); return false; }); 
   })



@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "registerForm" }))
{       

    <div id="registerDialog" title="Регистрация">
        @Html.LabelFor(x => x.FirstName)
        <br/>
        @Html.TextBoxFor(x => x.FirstName, new { @class = "registerUser" })
        <br/>
        @Html.ValidationMessageFor(x => x.FirstName)          
        <br/>
        @Html.LabelFor(x => x.LastName)           
        <br/>
        @Html.TextBoxFor(x => x.LastName, new { @class = "registerUser" })            
        <br/>
        @Html.ValidationMessageFor(x => x.LastName)          
        <br/>
        @Html.LabelFor(x => x.Email)           
        <br/>
        @Html.TextBoxFor(x => x.Email, new { @class = "registerUser" })           
        <br/>
        @Html.ValidationMessageFor(x => x.Email)           
        <br/>
        @Html.LabelFor(x => x.Password)           
        <br/>
        @Html.TextBoxFor(x => x.Password, new { @class = "registerUser" })           
        <br/>
        @Html.ValidationMessageFor(x => x.Password)          
        <br/>
        @Html.LabelFor(x => x.ConfirmPassword)           
        <br/>
        @Html.TextBoxFor(x => x.ConfirmPassword, new { @class = "registerUser" })            
        <br/>
        @Html.ValidationMessageFor(x => x.ConfirmPassword)                                   
        <br/>
        @Html.CheckBoxFor(x => x.RememberYou) запомнить Вас?                        
        <br/>
         <br/>
        @Html.ActionLink("Сохранить", "LogIn", "Account", null, new { @class = "accountBtn", style = "font-size: 0.8em;", id = "registerBtnSbmt" })
       <a href="#" class="accountBtn" id="closeRegisterDialog" style = "font-size: 0.8em;">Закрыть</a>
    </div>
}

Answer 1

您需要将表单标签移动到对话框内。您会注意到，当您创建对话框并打开它时，它会将您的 div 移出表单。您可能会想要：

<div id="registerDialog" title="Регистрация">
    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "registerForm" }))
    {       

        @Html.LabelFor(x => x.FirstName)
        <br/>
        @Html.TextBoxFor(x => x.FirstName, new { @class = "registerUser" })
        <br/>
        @Html.ValidationMessageFor(x => x.FirstName)          
        <br/>
        @Html.LabelFor(x => x.LastName)           
        <br/>
        @Html.TextBoxFor(x => x.LastName, new { @class = "registerUser" })            
        <br/>
        @Html.ValidationMessageFor(x => x.LastName)          
        <br/>
        @Html.LabelFor(x => x.Email)           
        <br/>
        @Html.TextBoxFor(x => x.Email, new { @class = "registerUser" })           
        <br/>
        @Html.ValidationMessageFor(x => x.Email)           
        <br/>
        @Html.LabelFor(x => x.Password)           
        <br/>
        @Html.TextBoxFor(x => x.Password, new { @class = "registerUser" })           
        <br/>
        @Html.ValidationMessageFor(x => x.Password)          
        <br/>
        @Html.LabelFor(x => x.ConfirmPassword)           
        <br/>
        @Html.TextBoxFor(x => x.ConfirmPassword, new { @class = "registerUser" })            
        <br/>
        @Html.ValidationMessageFor(x => x.ConfirmPassword)                                   
        <br/>
        @Html.CheckBoxFor(x => x.RememberYou) запомнить Вас?                        
        <br/>
         <br/>
        @Html.ActionLink("Сохранить", "LogIn", "Account", null, new { @class = "accountBtn", style = "font-size: 0.8em;", id = "registerBtnSbmt" })
       <a href="#" class="accountBtn" id="closeRegisterDialog" style = "font-size: 0.8em;">Закрыть</a>
    }
</div>

的底部有一个解释为什么会发生这种情况

页面 ：

对话框的要求之一是它显示为
最顶层的元素。持续实现这一目标的唯一方法
Internet Explorer 将使对话框成为对话框中的最后一个元素
body，因为它尊重 z-index 上的 DOM 顺序。一般有两种
解决方法：

在打开事件回调中将对话框元素移回 dom 中的其他位置。这有可能允许其他元素

出现在对话框顶部（见上文）

在提交之前，在关闭事件回调中将对话框内容元素移动到 dom 中的其他位置。 

这些都不适合构建到对话框中，并且
保留为建议的解决方法。作为此票的第一条评论
建议，这需要更好地记录。

Answer 2

首先抱歉之前没有回答，所以，转到答案。

1. 在模态窗口中，不可能，这不起作用，因为需要刷新页面，所以...
2. 要解决该问题，请使用属性[required]，并更改标题以替换默认的消息。
   注意：承认您需要了解有关创建模态窗口的知识，让我们开始代码：（我使用的是 ASP.NET MVC 5，它适用于 HTML 5x，旧版本不行

） sstatic.net/5Ui87.jpg" rel="nofollow noreferrer">

结果是：