Client Side Validation for Asp.Net MVC 4 Custom Annotation

Question

I mean this article:

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

which shows how to create custom annotation in Asp.Net MVC 2. However, client-side validation scripts, especially "MicrosoftMvcJQueryValidation", are not available in Asp.Net MVC4. I read it in one article, this is part of the Asp.Net Futures project. I want to enable client-side validation using jQuery. In my script project template template, I see scripts with the name:

jquery.validate.min.js jquery.validate.unobtrusive.min.js jquery.unobtrusive-ajax.min.js 

Can these existing scripts be used? or do I need to force download a futures project?

Answer 1

This article is about MVC 2, which used MicrosoftAjax. MVC 4 no longer includes MS Ajax files as they are deprecated, and using jquery is the preferred method.

To check your settings, make sure these scripts are in your layout.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <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> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

And these two parameters are present in the appSettings section in the web.config file

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

Therefore, when you add data annotations to your ViewModels, you get confirmation on the client side and on the server side as

 public class MyModel { [Required] [StringLength(30)] public string FirstName { get; set; } [Required] [StringLength(30)] public string LastName { get; set; } } 

In your opinion, just make sure you have such code

 <div> @Html.LabelFor(model => model.FirstName) </div> <div> @Html.TextBoxFor(model => model.FirstName) <br/> @Html.ValidationMessageFor(model => model.FirstName) </div> <div> @Html.LabelFor(model => model.LastName) </div> <div> @Html.TextBoxFor(model => model.LastName) <br/> @Html.ValidationMessageFor(model => model.LastName) </div> 

Update

Here is an example of a custom validator that I called RateRequiredIfCustomIndexRate This is the javascript side to add to the jquery validation

 $("document").ready(function () { var isCustomRateRequired = document.getElementById("IsCustomRateRequired"); isCustomRateRequired.onchange = function () { if (this.checked) { $('#Rate').attr('disabled', 'disabled'); $('#Rate').val(''); } else { $('#Rate').removeAttr('disabled'); } }; }); jQuery.validator.addMethod("raterequiredifcustomindexrate", function (value, element, param) { var rateRequired = $("#CustomRateRequired").val(); if (rateRequired && value == "") { return false; } return true; }); jQuery.validator.unobtrusive.adapters.addBool("raterequiredifcustomindexrate"); 

Answer 2

The key drawback here is that the server validator must implement the IClientValidatable interface:

 public class RateRequiredIfCustomIndexRateAttribute : ValidationAttribute, IClientValidatable { public override bool IsValid(object value) { return false; } public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) { yield return new ModelClientValidationRule { ErrorMessage = this.ErrorMessage, ValidationType = "raterequiredifcustomindexrate" }; } } 

Once you do this, client-side validation should be properly connected. You can verify this by making sure your input field has the attribute "data-val-raterequiredifcustomindexrate".