MVC3 Client side validation not working

Question

I'm using MVC3 with Razor.
I've included the following in my _Layout.cshtml:

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

My form looks like:

  @{
       ViewBag.Title = "Register"; 
       Html.EnableClientValidation();
   }  
   @using (Html.BeginForm("Register"))
   {
      <fieldset>
        <p>
            @Html.LabelFor(o => o.Email)
            @Html.TextBoxFor(o => o.Email)
            @Html.ValidationMessageFor(o => o.Email)
        </p>
  ...
 </fieldset>
}

My ViewModel has DataAnnotations (and implements IValidatableObject), and it validates during controller action. However I cannot seem to be able to use JS validation on the clientside without posting the form.

What am I missing?

Answer 1

Remove the Html.EnableClientValidation(); and goto your web config, and make sure you have an appSetting that looks like the below:

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

Answer 2

In ASP.NET MVC 3 the jquery validation plugin is the default for performing client-side validation. So you could remove all Microsoft*.js scripts from your project. You only need the following:

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

and remove the Html.EnableClientValidation(); call. Client validation is enabled in web.config:

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

Answer 3

Try adding the following lines to your view.

HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

Along with including jquery-1.4.4.js, jquery.validate.js, jquery.validate.unobtrusive.js

I get it to work for my app but it seems not to kick in until I put in a bad value. For example

[Required(ErrorMessageResourceType = typeof(Resources.WValidation), ErrorMessageResourceName = "TestCountRequired")]
        [Range(1, Int32.MaxValue, ErrorMessageResourceType = typeof(Resources.WValidation), ErrorMessageResourceName = "TestCountRange")]
        public int? TestCountThreshold { get; set; }

then i put in a 0 on the front-end and after that client side validation works flawlessly. I would like for validation to work for initial blank text boxes... It seems incorrect for the validation to wait until there is an attempted bad value.