MicrosoftMVCJQueryValidation?

Dec 16, 2010 at 7:56 PM

Have you tested PopupForm with MicrosoftMVCJQueryValidation?  I cant seem to get it working. 

I added the following line in my global.asax.cs Application_Start()

Settings.PopupForm.ClientSideValidation = true;

Here's my test container view:

<html>
<head>
    <%=Html.CSS("site.css") %>
    <%=Html.Script("jquery-1.4.2.min.js")%>
    <%=Html.CSS("jquery-ui-1.8.5.custom.css") %>
    <%=Html.Script("jquery-ui-1.8.5.custom.min.js")%>
    <%=Html.Script("jquery.form.js")%>
    <%=Html.CSS("awesome.css") %>
    <%=Html.Script("awesome.js")%>
    <%=Html.Script("jquery.validate.js")%>
    <%=Html.Script("MicrosoftMvcJQueryValidation.js")%>
</head>

<body>
    <h2>Test</h2>

    <%=Html.MakePopupForm<TeamScheduler.Controllers.TeamMembersTabController>(x => x.Test(0), title: "Add Member", refreshOnSuccess: true, height: 500, clientSideValidation:true)%>
    <%=Html.PopupFormActionLink<TeamScheduler.Controllers.TeamMembersTabController>(o => o.Test(1), "Add New Team Member")%>

</body>
</html>

 

 

And here's my partial view returned from the Test() action:

 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TeamScheduler.Models.TeamMemberVM>" %>


    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm()) {%>
        
        <%: Html.ValidationSummary(true) %>

        <fieldset style="height:330px;" id="5">
            
            <%: Html.HiddenFor(model=>model.TeamMember.TeamID) %>
            
            <div class="editor-label">
                <%: Html.LabelFor(model => model.TeamMember.PersonID) %>
            </div>
            <div class="editor-field">
                <%=Html.EditorFor(model => model.TeamMember.PersonID) %>
                <%: Html.ValidationMessageFor(model => model.TeamMember.PersonID) %>
            </div>


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

        </fieldset>

    <% } %>
    

Just to be sure, I tested everything else with a manual dialog, and this worked fine:

    <script type="text/javascript">$(document).ready(function () { $('#dlg').dialog(); }); </script>
    <div id="dlg" style="display:none;">
    <% Html.RenderAction("Test", "TeamMembersTab", new { TeamID = 1 }); %>
    </div>

Coordinator
Dec 17, 2010 at 8:56 AM
Edited Dec 17, 2010 at 12:37 PM

Hi,

The reason why it worked with your manual dialog is because the html was present inside the div right from the start,

but the PopupForm fills the div with html via ajax ($.get) when the user calls it (clicks the button)

here's how you can make it work:

 

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<PersonEditInput>" %>

<%
    Html.EnableClientValidation(); %>
<%using(Html.BeginForm()){%>
<%=Html.HiddenFor(o => o.Id) %>
<%=Html.EditorFor(o => o.FirstName) %>
<%=Html.EditorFor(o => o.LastName) %>
...
<%} %>
<script type="text/javascript">
    enableClientValidation();
</script>

 

put this in some js file and reference it in your site.master

 

<script type="text/javascript">
    function enableClientValidation() {
        var allFormOptions = window.mvcClientValidationMetadata;
        if (allFormOptions) {
            while (allFormOptions.length > 0) {
                var thisFormOptions = allFormOptions.pop();
                __MVC_EnableClientValidation(thisFormOptions);
            }
        }
    }
</script>

 

in my new release the live demo is gonna use MicrosoftMvcJQueryValidation (PersonController)

Dec 17, 2010 at 5:09 PM

Great - that works perfect.  Thanks again!

Apr 21, 2011 at 2:10 PM

Thanks a lot - this solved an issue I was having!