MVC 3 Client Validation works intermittently

update: if you set at least one breakpoint in javascript, validation start to works, but without it does not work

update: adding jquery tag as this may be connected to validation plugin

I have MVC 3 version, System.Web.Mvc product version is: 3.0.20105.0 modified on 5th of Jan 2011 - i think that's the latest.

I’ve notice that client validation is not working as it suppose in the application that we are creating, so I’ve made a quick test.

I’ve created basic MVC 3 Application using Internet Application template.

I’ve added Test Controller:

using System.Web.Mvc;
using MvcApplication3.Models;

namespace MvcApplication3.Controllers
{
    public class TestController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Create()
        {
            Sample model = new Sample();

            return View(model);
        }

        [HttpPost]
        public ActionResult Create(Sample model)
        {
            if(!ModelState.IsValid)
            {
                return View();
            }

            return RedirectToAction("Display");
        }

        public ActionResult Display()
        {
            Sample model = new Sample();
            model.Age = 10;
            model.CardNumber = "1324234";
            model.Email = "somedata@test.com";
            model.Title = "hahah";

            return View(model);
        }
    }
}

Model:

using System.ComponentModel.DataAnnotations;

namespace MvcApplication3.Models
{
    public class Sample
    {
        [Required]
        public string Title { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        [Range(4, 120, ErrorMessage = "Oi! Common!")]
        public short Age { get; set; }

        [Required]
        public string CardNumber { get; set; }
    }
}

And 3 views:

Create:

@model MvcApplication3.Models.Sample

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@*@{ Html.EnableClientValidation(); }*@

@using (Html.BeginForm()) {
    @Html.ValidationSummary(false)
    <fieldset>
        <legend>Sample</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CardNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CardNumber)
            @Html.ValidationMessageFor(model => model.CardNumber)
        </div>

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

    @*<fieldset>

        @Html.EditorForModel()

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

    </fieldset>    *@           
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Display:

@model MvcApplication3.Models.Sample

@{
    ViewBag.Title = "Display";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Display</h2>

<fieldset>
    <legend>Sample</legend>

    <div class="display-label">Title</div>
    <div class="dis开发者_运维问答play-field">@Model.Title</div>

    <div class="display-label">Email</div>
    <div class="display-field">@Model.Email</div>

    <div class="display-label">Age</div>
    <div class="display-field">@Model.Age</div>

    <div class="display-label">CardNumber</div>
    <div class="display-field">@Model.CardNumber</div>
</fieldset>
<p>
    @Html.ActionLink("Back to List", "Index")
</p>

Index:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create", "Create")
</p>

<p>
    @Html.ActionLink("Display", "Display")
</p>

Everything is default here – Create Controller, AddView from controller action with model specified with proper scaffold template and using provided layout in sample application.

When I will go to /Test/Create client validation in most cases works only for Title and Age fields, after clicking Create it works for all fields (create does not goes to server).

However in some cases (after a build) Title validation is not working and Email is, or CardNumber or Title and CardNumber but Email is not. But never all validation is working before clicking Create.

I’ve tried creating form with Html.EditorForModel as well as enforce client validation just before BeginForm:

@{ Html.EnableClientValidation(); }

I’m providing a source code for this sample on dropbox – as maybe our dev env is broken :/ I’ve done tests on IE 8 and Chrome 10 beta.

Just in case, in web config validation scripts are enabled:

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

So my questions are

Is there a way to ensure that Client validation will work as it supposed to work and not intermittently?

Is this a desired behavior and I'm missing something in configuration/implementation?

update: if you set at least one breakpoint in javascript, validation start to works, but without it does not work

update: adding jquery tag as this may be connected to validation plugin

When unobtrusive validation is used - realtime client-side validation works only after first submit. Before first client-side validation of form is executed (just click submit) the realtime validation of fields not initialized and not working.

Put your script references in the document <head>. It's likely that there is a timing issue on when the scripts are executed and the validation is hooked up.