jQuery client side validation not working with MVC 3 MvcContrib.FluentHtml

Question

Using MVC 3 RTM and MvcContrib/FluentHtml version 3.0.51.0, I can't get the jQuery client side validation to work. Server side validation works fine, and returns showing the correct validation summary, etc. But the form post always tries to hit the server-side post controller action when it should have stopped on the client side to display the validation error.

Any ideas of what I'm missing? Could the latest version of MvcContrib/FluentHtml be incompatible with jQuery client validation?

Here's my code:

Web.config has:

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Site.Master page has:

<script src="<%= Url.Content("~/Assets/JavaScript/jquery-1.4.4.min.js")%>" type="text/javascript"></script>
   <script src="<%= Url.Content("~/Assets/JavaScript/jquery-ui-1.8.7.min.js")%>" type="text/javascript"></script>
   <script src="<%= Url.Content("~/Assets/JavaScript/jquery.validate.min.js")%>" type="text/javascript"></script>
   <script src="<%= Url.Content("~/Assets/JavaScript/jquery.validate.unobtrusive.min.js")%>" type="text/javascript"></script>

View page inherits from MvcContrib's ModelViewPage: Here's the view page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="ModelViewPage<MaintainReferralAgencyDetailVM>" %>
<%@ Import Namespace="OASIS3G.Controllers" %>
<%@ Import Namespace="OASIS3G.ViewModels" %>
<%@ Import Namespace="JCDCHelper.Extension"%>
<%@ Import Namespace="MvcContrib.FluentHtml" %>
<%@ Import Namespace="System.Web.Mvc" %>
<%@ Import Namespace="System.Web.Mvc.Html" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm()) %>
    <% { %>
        <h1>Referral Agency Detail</h1>
        <%= Html.ValidationSummary(false) %>
        <table class="NoBorder">
            <tr>
                <td class="NoBorder SubmitFormLeftColumn"><span class="required">* </span>Zip Code:</td>
                <td class="NoBorder"><%= this.TextBox(x => x.ReferralAgency.ContactInformation.Zipcode) %> Example: 99999 or 999990000
                   <%= Html.ValidationMessageFor(x=>x.ReferralAgency.ContactInformation.Zipcode) %>
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit" />
    <% } %>
</asp:Content>

Here's the controller post action:

[HttpPost]
        public ActionResult MaintainReferralAgencyDetail(MaintainReferralAgencyDetailVM userInputs)
        {
// I shouldn't reach this when I submit the form with a blank Zipcode, but I do:
            if (ModelState.IsValid)
            {

Here's the entity object with the Required field:

[Serializable]
public class ContactInformationEO
{
    public virtual Int64 AddressId { get; set; }

    [Required]
    public virtual string Zipcode { get; set; }

Answer 1

Just ran headlong into this problem, looks like Scott Kirkland has a solution.

Answer 2

I figured it out, it's definitely MvcContrib messing it up. I originally thought MvcContrib wasn't a factor because when I had changed from MvcContrib's ModelViewPage to Mvc.ViewPage, I switched the "this.TextBox" to "Html.TextBox", it still didn't work. However, I just discovered that I need to switch the control to "Html.EditorFor" instead of "Html.TextBox".

I've googled for a few minutes and it doesnt look like MvcContrib version 3.0.51.0 supports jquery client-side validation with any equivalent of EditorFor, so I'll have to just rip it out and use the native MVC controls.

You can see an article with a complete solution of my approach here: automatically-validate-and-format-data-with-asp-net-mvc-and-jquery