ASP.NET MVC3 - Custom validation attribute -> Client-side broken

Question

I'm trying to implement a custom validation attribute with client-side validation too.

My attribute looks like:

public class FileSize : ValidationAttribute, IClientValidatable { private readonly int _size; public FileSize(int size) { ErrorMessage = "Invalid size."; _size = size; } public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) { var rule = new ModelClientValidationRule { ValidationType = "fileSize", ErrorMessage = ErrorMessage }; rule.ValidationParameters["size"] = _size; yield return rule; } public override bool IsValid(object value) { return ((HttpPostedFileBase) value).ContentLength < _size; } } 

and the script includes in my view looks like:

<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> <script type="text/javascript"> $(function () { $.validator.unobtrusive.adapters.addSingleVal('fileSize', 'size'); }); </script> 

The problem is that even with all of those script includes and the function that registers a new adapter, then the client-side validation is still not working, it simply just keep using the server-side validation only...

Any ideas?

Answer 1

You are missing some JavaScript.

Look at Brad Wilsons"greater" example from his Advanced ASP.NET MVC 3 talk.

Some sourcecode from it:

(function ($) { $.validator.addMethod("jqgreater", function (value, element, params) { var thisValue, otherValue; if (this.optional(element)) { // No value is always valid return true; } thisValue = parseInt(value); otherValue = parseInt($(params).val()); return thisValue > otherValue; }); function getModelPrefix(fieldName) { return fieldName.substr(0, fieldName.lastIndexOf(".") + 1); } function appendModelPrefix(value, prefix) { if (value.indexOf("*.") === 0) { value = value.replace("*.", prefix); } return value; } $.validator.unobtrusive.adapters.add("greater", ["other"], function (options) { var prefix = getModelPrefix(options.element.name), other = options.params.other, fullOtherName = appendModelPrefix(other, prefix), element = $(options.form).find(":input[name=" + fullOtherName + "]")[0]; options.rules["jqgreater"] = element; // element becomes "params" in callback if (options.message) { options.messages["jqgreater"] = options.message; } }); } (jQuery));