Client Validation Issue - MVC 4 RC

Question

Can someone help me with client validation issue (MVC4 RC, VS2010)? The Intellisense is not showing addMethod in jQuery.validator. When I run the application, it throws javascript null error at this method. I want to allow the users to enter the time that is greater than current time. My CustomValidation.js file looks like this:

/// <reference path="jquery-1.7.2-vsdoc.js" />
/// <reference path="jquery.validate-vsdoc.js" />
/// <reference path="jquery.validate.unobtrusive.js" />

jQuery.validator.addMethod('dategreaterthan', function (value, element, param) {   
      var today = new Date();
      return Date.parse(value) > today; 
});

$.validator.unobtrusive.adapters.add("dategreaterthan", function (options) {
    options.rules["dategreaterthan"] = true;
    options.messages["dategreaterthan"] = options.message;
});

Here is the custom validation attribute code:

public class DateGreaterThanAttribute : ValidationAttribute, IClientValidatable
    {
        private const string DefaultErrorMessage = "{0} Time must be greater than current time";

        public DateGreaterThanAttribute() :
            base(DefaultErrorMessage) 
        { }

        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            ValidationResult validationResult = ValidationResult.Success;

            if (((DateTime)value).TimeOfDay >= DateTime.Now.TimeOfDay)
                return validationResult;
            else
            {
                return new ValidationResult(FormatErrorMessage(this.ErrorMessage));                
            }
        }

        public override string FormatErrorMessage(string name)
        {
            return base.FormatErrorMessage(name);
        }


        #region IClientValidatable Members

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
             var rule = new ModelClientValidationRule();
             rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
             rule.ValidationType = "dategreaterthan";
             yield return rule;                
        }

        #endregion
    }

I have added the CustomValidation.js to the BundleConfig.cs file as shown below: public class BundleConfig (not sure if it is correct):

   public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.*"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui*"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
        bundles.Add(new ScriptBundle("~/bundles/customvalidation").Include(
                    "~/Scripts/CustomValidation.js"));     
    }

Answer 1

Make sure that you have included the jqueryval bundle (containing ~/Scripts/jquery.unobtrusive* and ~/Scripts/jquery.validate* scripts) before your custom bundle (which you have associated with jqueryui). So in that order:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")