Проверка модели не работает в диалоге 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, так как он учитывает порядок DOM по z-index. Обычно есть два обходные:

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. Чтобы решить проблему, используйте атрибут [обязательный] и измените заголовок для замены сообщения по умолчанию.Примечание. Признавая, что вам нужно знание о создании модального окна, давайте перейдем к коду: (я использую ASP.NET MVC 5, он работает для HTML 5x, до старой версии nope)

Это результат: