MVC: Clientside validation stops working in SimpleModal AJAX popup after opening and closing it once

Question

I have a view with a simplemodal popup window. You click on a hyperlink, it pops up the window, and if you try to submit the popup'd form without filling in any information it will display the appropriate validation error message next to the textbox. If you close the modal popup and click the hyperlink again, it seems to not do the client side validation when you click the submit. It just lets it be submitted, and then it'll catch it on the server side checking. Why would opening a modal popup and then closing it, and then reopening a second time make validation stop working? I'm using the basic osx modal that is demo'd at SimpleModal Demos. Any suggestions would be greatly appreciated. I've checked around the site but if someone has a previous post that could be helpful that would be appreciated too.

Here is my partial view file:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NSS.Models.Company>" %>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

<% Html.EnableClientValidation(); %> <% using (Html.BeginForm("Create", "Companies")) {%> <%: Html.ValidationSummary(true)%>

<fieldset>
    <legend>New Company</legend>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Name)%>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Name)%>
        <%: Html.ValidationMessageFor(model => model.Company_Name)%>
    </div>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Phone)%>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Phone)%>
        <%: Html.ValidationMessageFor(model => model.Company_Phone)%>
    </div>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Fax)%>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Fax)%>
        <%: Html.ValidationMessageFor(model => model.Company_Fax)%>
    </div>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Website)%>
    </div>

    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Website)%>
        <%: Html.ValidationMessageFor(model => model.Company_Website)%>
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

<% } %>

That partial is rendered in this block of .aspx:

<div id='container'>
    <div id='content'>
        <div id='osx-modal'>
            <input type='button' name='osx' value='Demo' class='osx demo'/>
        </div>

        <!-- modal content -->
        <div id="osx-modal-content">
            <div id="osx-modal-title">Create a new Company</div>
            <div class="close"><a href="#" class="simplemodal-close">x</a></div>
            <div id="osx-modal-data">
                <h2>Create a new Company</h2>
                <% Html.RenderPartial("CreateForm", new NSS.Models.Company()); %>
                <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
            </div>
        </div>
    </div>
</div>

Here is my Validation code:

public class Company_Validation
{
    [Required(AllowEmptyStrings=false, ErrorMessage = "Company Name is required")]
    [StringLength(50, ErrorMessage = "Company Name may not be longer then 50 characters")]
    public string Company_Name { get; set; }
}

Answer 1

Because of the way SimpleModal handles the contents of the modal, it sounds like it is losing the validation binding.

One option would be to use the persist: true option, but you'd probably want to make sure to clear out any populated form values.

For example:

$(element).modal({
    persist: true,
    onClose: function (dialog) {
        var modal = this;
        $('input, textarea', dialog.data[0]).val('');
        modal.close();
    }
});