MVC 3 Client Validation works intermittently
- by Gutek
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 = "[email protected]";
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="display-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?
