MVC2/Jquery validation issues.

Question

I have read the following: http://weblogs.asp.net/imranbaloch/archive/2010/08/23/asp-net-mvc-jquery-validation-and-validationsummary.aspx

http://haacked.com/archive/2009/11/19/aspnetmvc2-custom-validation.aspx

And still can't get the jQuery validation to work with MVC2. I can get non jQuery working but when i swap out the JS files it doesn't work. It's going on day 3 and I'm totally stuck at this point. So here is what I have. I appreciate your help.

Site.Master

 <script src="<%= this.ResolveClientUrl("~/Resources/js/jquery-1.4.1.js") %>"
        type="text/javascript"></script>
    <script src="<%= this.ResolveClientUrl("~/Resources/js/jquery.validate.js") %>"
        type="text/javascript"></script>
    <script src="<%= this.ResolveClientUrl("~/Resources/js/MicrosoftMvcJqueryValidation.js") %>"
        type="text/javascript"></script>

    <script src="<%= this.ResolveClientUrl("~/Resources/js/ourJS--VERSION--.js") %>" type="text/javascript"></script>
    <script src="<%= this.ResolveClientUrl("~/Resources/js/json2.js") %>" type="text/javascript"></script>
    <link href="../../Resources/css/ourCSS--VERSION--.css" rel="stylesheet" type="text/css" />

ViewModel:

namespace OurNamespace
{
    [ExcludeFromCodeCoverage]
    public class OurDataModelView : PersistedDataModelView
    {
        public OurModelView () : base()
        {
            ID = -1;
            StartDate = DateTime.MinValue;
            EndDate = DateTime.MinValue;
            Description = string.Empty;
            Deleted = false;
        }

        [DisplayFormat(DataFormatString = "{0:MM/yyyy}")]
        public DateTime? StartDate { get; set; }

        [DisplayFormat(DataFormatString = "{0:MM/yyyy}")]
        public DateTime? EndDate { get; set; }

        [Required(ErrorMessage="Description is required.")]
        [StringLength(250000, ErrorMessage = "A maximum of 250000 characters are allowed")]
        public string Description { get; set; }

        public int? ID { get; set; }

        public bool Deleted { get; set; }
    }
}

ASPX page

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
...
 <% Html.RenderAction(WebConstants.ACTION_DISPLAY_HEADER, WebConstants.CONTROLLER, new { id = ViewData["ID"] }); %>
...

our partial view that validation is done on:

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<OurNameSpace.OurDataModelView>" %>
...
        <% Html.EnableClientValidation(); %>
        <% using (Html.BeginForm("", "", FormMethod.Post , new { id = "HeaderForm", onSubmit="return false;"})) { %>
        <%: Html.ValidationSummary(false, "validation failed") %>
        <%: Html.HiddenFor(model => model.ID) %>
        <div class="form-row">
            <div class="form-label">Description</div>
            <div class="form-element"><%: Html.TextAreaFor(model => model.Description)%></div>
            <div><%= Html.ValidationMessageFor(model => model.Description) %></div>
        </div>

        <div class="buttons">
            <input id="Save" type="submit" class="save-button" value="" />
            <div id="Cancel" class="cancel-button"></div>
        </div>

        <% } %>
...

**SO by doesn't work here is what I do see. on view source I see:

//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"Description_validationMessage","ValidationRules":[{"ErrorMessage":"A maximum of 250000 characters are allowed","ValidationParameters":{"minimumLength":0,"maximumLength":250000},"ValidationType":"stringLength"},{"ErrorMessage":"Description is required.","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"HeaderForm","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"});
//]]>

However, client side validation is not appearing. I click on the textarea type in a char and delete it unfocus from the element and nothing happens. Any ideas for debugging this?

Answer 1

Here's a very simple working example:

Model:

public class MyViewModel
{
    [Required(ErrorMessage = "Description is required.")]
    [StringLength(10, ErrorMessage = "A maximum of 10 characters are allowed")]
    public string Description { get; set; }
}

Controller:

[HandleError]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

View:

<script type="text/javascript" src="<%= Url.Content("~/scripts/jquery-1.4.1.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/scripts/jquery.validate.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/scripts/MicrosoftMvcJQueryValidation.js") %>"></script>

<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm()) { %>
    <%: Html.TextAreaFor(x => x.Description)%></div>
    <%: Html.ValidationMessageFor(x => x.Description) %>
    <input type="submit" value="OK" />
<% } %>

The MicrosoftMvcJQueryValidation.js is not included in the standard project template as it is part of the MVC Futures project (extract it from the source code).

Once you've put this example into action and proved it to work you could start adding functionality.