模型驗證在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> 

還有就是爲什麼發生這種情況在這個page

從底部的頁面的解釋：

一個對話框的要求是，它出現作爲 最頂端的元素。唯一能夠在 Internet Explorer中始終如一地完成此操作的方法是讓該對話框成爲 正文中的最後一個元素，因爲它遵守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

首先對不起之前沒有回答，所以，去答案。

1. 在一個模態窗口，不能是可能的，這不行，原因是需要刷新頁面，所以...
2. 爲了解決這個問題，使用屬性[要求]，並更改標題替換messagem默認值。 注：我承認，你得了解有關創建模式窗口，讓我們的代碼：（我使用ASP.NET MVC 5，它是HTML 5倍作品，舊版本沒了）

這就是結果：