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>

有一个解释为什么会发生在page

的底部

从页面：

对话框的一个要求是它显示为最顶层的元素。实现这一目标的唯一方法 Internet Explorer将对话框作为最后一个元素 body，因为它尊重z-index上的DOM顺序。一般有两个变通：
move the dialog element back somewhere else in the dom in the open event callback. This has the potential to allow other elements to
出现在对话框的顶部（见上文）
move the dialog content element somewhere else in the dom in the close event callback, before the submit. 
这些都不适合构建对话框，并且是离开了建议的解决方法。作为此票的第一个评论建议，这需要更好地记录。

Answer 2

首先很抱歉没有回答，所以，回答。

在模态窗口中，不可能，这不起作用，因为必须刷新页面，所以......
要解决此问题，请使用[required]属性，并更改标题以替换messagem default。注意：承认你必须知道创建一个模态窗口让我们去代码:(我使用的是ASP.NET MVC 5，它适用于HTML 5x，适用于旧版本的nope）

结果是：

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

2 个答案: