title: Validate MVC field at client side
body: <p>I have problem validating one field at client side, Here is my code:</p>
  
  <p>Model:</p>
  
  <pre><code> public class Registration
      {
          public int Id { get; set; }
          [IsUserExistAttribute(ErrorMessage = "Email already exists!")]
          [EmailAddress(ErrorMessage = "Please enter valid Email")]
          [Required(ErrorMessage = "Email is required")]
          public string Email
          {
              get; set;
  
          }
          [MustBeTrue(ErrorMessage = "Please Accept the Terms &amp; Conditions")]
          public bool TermsAndConditions { get; set; }
  
  
      }
  </code></pre>
  
  <p>ValidationAttribute:</p>
  
  <pre><code>public class IsUserExistAttribute : ValidationAttribute,IClientValidatable
      {
          public override bool IsValid(object email)
          {
              DemoDbContext demoContext=new DemoDbContext();
              string emailString = Convert.ToString(email);
              if (demoContext.Registrations.Any(a=&gt;a.Email.Contains(emailString)))
              {
                  return false;
              }
              return true;
          }
  
          public IEnumerable&lt;ModelClientValidationRule&gt; GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
          {
              yield return new ModelClientValidationRule
              {
                  ErrorMessage = this.ErrorMessage,
                  ValidationType = "emailvalidate"
              };
          }
      }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>@using (Html.BeginForm())
  {
      @Html.AntiForgeryToken()
  
      &lt;div class="form-horizontal"&gt;
          &lt;h4&gt;Registration&lt;/h4&gt;
          &lt;hr /&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.Email, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.Email, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.TermsAndConditions, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  &lt;div class="checkbox"&gt;
                      @Html.EditorFor(model =&gt; model.TermsAndConditions)
                      @Html.ValidationMessageFor(model =&gt; model.TermsAndConditions, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Everthing upto this works fine, But my question is This <strong>IsUserExistAttribute</strong> doesn't validate it on client side, on server side it validates and give the message like <em>Email already exists!</em> </p>
  
  <p>But, I want it to validate client side too. So, what is the good way to achieve this? Other approach is also welcome :)</p>
  
  <p>I tried something like this seems no success:</p>
  
  <pre><code> $.validator.addMethod("emailvalidate", function (value, element) {
              var is_valid = false;
              $.ajax({
                  // as before...
                  async: false,
                  success: function (data) {
                      is_valid = data === 'True';
                  }
              });
              return is_valid;
          }, "Username not available.");
  </code></pre>