Model validation does not work in jquery dialog

Question

I am using MVC3 and added model validation with required attributes. Then I have created page which has jquery dialog (not ajax dialog). Validation does not work in that case. But if I put html from dialog to page it works fine.

Does any body know how to solve problem?

Here is my 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

Firstly sorry for not answered before, so, go to the answer.

1. In a modal windows, not is possible, this not work, cause is necessary refresh the page, so...
2. To solved the problem, use the attribute [required], and change the title for replace the messagem default. Note: Admitting that you gotta knowledge about create a modal window let's go the code: (I'm use ASP.NET MVC 5, it's works for HTML 5x, to old version nope)

That's result:

Answer 2

You need to move your form tags inside of your dialog. You will notice when you create the dialog and open it, it moves your div out of your form. You would want:

<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>

There is an explanation of why this happens at the bottom of this page

From the 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.