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

【问题标题】：Model validation does not work in jquery dialog模型验证在 jquery 对话框中不起作用
【发布时间】：2017-02-20 21:12:30
【问题描述】：

我正在使用 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>
}

【问题讨论】：

你能贴出你用来生成对话框的代码吗
$(document).ready(function () { $("#registerDialog").dialog({ autoOpen: false, show: "blind", hide: "explode", modal: true,可调整大小：假，高度：570，宽度：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; }); });
嗯...如何格式化代码？:)
你能从 registerDialog 发布 html 吗？

标签： jquery jquery-validate jquery-ui-dialog

【解决方案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. 
这些都不适合内置到对话框中，并且按照建议的解决方法离开。作为这张票的第一条评论建议，这需要更好地记录。

【讨论】：

是的，它有效。非常感谢xbrady！！！！！！我花了2个多小时来解决这个问题。我必须更加专心。
我的回答在左上角有一个向上箭头、0 和一个向下箭头。单击向上箭头，然后单击向下箭头下方的复选标记。 :)

【解决方案2】：

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

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

结果如下：

【讨论】：