jquery - 模型验证在 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 的底部有解释为什么会发生这种情况。

来自页面:

One of the requirements of the dialog is that it appear as the top-most element. The only way to accomplish this consistently in Internet Explorer is to have the dialog be the last element in the body, as it respects DOM order over z-index. There are generally two work-arounds:

move the dialog element back somewhere else in the dom in the open event callback. This has the potential to allow other elements to

appear on top of the dialog (see above)

move the dialog content element somewhere else in the dom in the close event callback, before the submit. 

Neither of these are suitable for building in to the dialog, and are left as suggested work-arounds. As the first comment on this ticket suggests, this needs to be documented better.