title: Client side validation for custom validator asp.net MVC 4
body: <p>I have a custom server side validator that works but I am struggling to get the client side working.  Here is what I have so far.</p>
  
  <p>The Validator is checking that one value entered is at least a percentage of another value entered.</p>
  
  <pre><code>public sealed class PercentageOfAttribute : ValidationAttribute, IClientValidatable
  {
      private readonly string sourcePropertyName;
      private readonly int minimumPercentage;
  
      public PercentageOfAttribute(string sourcePropertyName, int minimumPercentage)
      {
          this.sourcePropertyName = sourcePropertyName;
          this.minimumPercentage = minimumPercentage;
      }
  
      protected override ValidationResult IsValid(object value, ValidationContext validationContext)
      {
          var propertyName = validationContext.ObjectType.GetProperty(this.sourcePropertyName);
          if (propertyName == null)
              return new ValidationResult(String.Format("Uknown property {0}", this.sourcePropertyName));
  
          int propertyValue = (int)propertyName.GetValue(validationContext.ObjectInstance, null);
  
          var minValue = (propertyValue / 100) * this.minimumPercentage;
          if ((int)value &gt; minValue)
              return ValidationResult.Success;
  
          return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
  
      }
  
      public IEnumerable&lt;ModelClientValidationRule&gt; GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
      {
          var rule = new ModelClientValidationRule
          {
              ErrorMessage = this.ErrorMessageString,
              ValidationType = "percentageof"
          };
          rule.ValidationParameters["propertyname"] = this.sourcePropertyName;
          rule.ValidationParameters["minimumpercentage"] = this.minimumPercentage;
          yield return rule;
      }
  }
  </code></pre>
  
  <p>And the javascript for the client side...</p>
  
  <pre><code>jQuery.validator.addMethod("percentageof", function (value, element, params) {
      var propertyname = params['propertyname'];
      var minimumpercentage = param['minimumpercentage'];
      var propValue = $('#' + propertyname).val();
      var minValue = (propValue / 100) * minimumpercentage;
      if (value &gt;= minValue) {
          return true;
      }
      return false;
  });
  jQuery.validator.unobtrusive.adapters.add("percentageof", ["propertyname", "minimumpercentage"], function (options) {
      options.rules['propertyname'] = options.params.propertyname;
      options.rules['minimumpercentage'] = options.params.minimumpercentage;
      options.message['percentageof'] = options.message;
  });
  </code></pre>
  
  <p>I have debugged the addapters.add function and this is passing in the correct data.  The "data-val-percentageof-*" values appear in the html and have the correct values.</p>
  
  <p>The javascript error I am currently getting is "$.validator.methods[method] is undefined".  I think this means that I have not correctly set up the client side validator. I've read through countless examples and tutorials but can't seem to figure out a combination that works.</p>
  
  <p>If I remove all my custom stuff then the default client side validation works perfectly.</p>
  
  <p>Can any one help show me what I am doing wrong?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The rendered html is as follows</p>
  
  <pre><code>&lt;div class="form-group"&gt;
  &lt;label class="col-sm-3 control-label" for="PurchasePrice"&gt;Purchase Price (£36,000 minimum) *&lt;/label&gt;
  &lt;div class="col-sm-6"&gt;
      &lt;input id="PurchasePrice" class="form-control valid" type="text" value="0" name="PurchasePrice" data-val-required="Please enter a Purchase Price" data-val-range-min="36000" data-val-range-max="2147483647" data-val-range="Please enter at least £36,000" data-val-number="The field Purchase Price (£36,000 minimum) * must be a number." data-val="true"&gt;
      &lt;span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="PurchasePrice"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
  &lt;label class="col-sm-3 control-label" for="Deposit"&gt;Available Deposit (30% minimum)*&lt;/label&gt;
  &lt;div class="col-sm-6"&gt;
      &lt;input id="Deposit" class="form-control" type="text" value="0" name="Deposit" data-val-required="Please enter an Available Deposit" data-val-percentageof-propertyname="PurchasePrice" data-val-percentageof-minimumpercentage="30" data-val-percentageof="Please enter value that is at least 30% of the purchase price" data-val-number="The field Available Deposit (30% minimum)* must be a number." data-val="true"&gt;
      &lt;span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Deposit"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>