title: ASP.NET C# implement Client Side validation using Validation Attribute
body: <p>I'm going straight to the point here.
  I'm trying to implement my server side validation on Client Side.
  I'm really new to this so please bear with me.</p>
  
  <p>I've tried the validation on Server side and it works pretty well, but when I add the <code>jqueryval</code> on my views it doesn't do the custom validation anymore.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>  public class AgentViewModel : AgentModel
      {
          [Required]
          [FileSize(10240)]
          [FileTypes("jpg,jpeg,png")]
          public HttpPostedFileBase photo { get; set; }
          public List&lt;ProvinceModel&gt; Provinces { get; set; }
          public List&lt;CityModel&gt; Cities { get; set; }
      }
  </code></pre>
  
  <p><strong>Custom Validation</strong></p>
  
  <pre><code> public class FileTypesAttribute : ValidationAttribute
      {
          private readonly List&lt;string&gt; _types;
  
          public FileTypesAttribute(string types)
          {
              _types = types.Split(',').ToList();
          }
  
          public override bool IsValid(object value)
          {
              if (value == null) return true;
  
              var fileExt = System.IO.Path.GetExtension((value as HttpPostedFileBase).FileName).Substring(1);
              return _types.Contains(fileExt, StringComparer.OrdinalIgnoreCase);
          }
  
          public override string FormatErrorMessage(string name)
          {
              return string.Format("Invalid file type. Only the following types {0} are supported.", String.Join(", ", _types));
          }
      }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@using (Html.BeginForm("Save", "Agent", FormMethod.Post, new { enctype = "multipart/form-data" }))
      {
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;div id="preview"&gt;
                      &lt;img src="~/Content/Assets/no-image.png" id="profile_image" class="img-thumbnail" /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      @Html.TextBoxFor(m =&gt; m.photo, new { @class = "form-control", type = "file" })
                      @Html.ValidationMessageFor(m =&gt; m.photo)
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-9"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="form-group"&gt;
                              @Html.LabelFor(m =&gt; m.FirstName)
                              @Html.TextBoxFor(m =&gt; m.FirstName, new { @class = "form-control" })
                              @Html.ValidationMessageFor(m =&gt; m.FirstName)
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="form-group"&gt;
                              @Html.LabelFor(m =&gt; m.MiddleName)
                              @Html.TextBoxFor(m =&gt; m.MiddleName, new { @class = "form-control" })
                              @Html.ValidationMessageFor(m =&gt; m.MiddleName)
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="form-group"&gt;
                              @Html.LabelFor(m =&gt; m.LastName)
                              @Html.TextBoxFor(m =&gt; m.LastName, new { @class = "form-control" })
                              @Html.ValidationMessageFor(m =&gt; m.LastName)
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  @Html.LabelFor(m =&gt; m.ProvinceID)
                                  @Html.DropDownListFor(m =&gt; m.ProvinceID, new SelectList(Model.Provinces, "ProvinceID", "Description"), "Select Province", new { @class = "form-control province" })
                                  @Html.ValidationMessageFor(m =&gt; m.ProvinceID)
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  @Html.LabelFor(m =&gt; m.CityID)
                                  @Html.DropDownListFor(m =&gt; m.CityID, new SelectList(Model.Cities, "CityID", "Description"), "Select City", new { @class = "form-control city" })
                                  @Html.ValidationMessageFor(m =&gt; m.CityID)
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  @Html.LabelFor(m =&gt; m.Street)
                                  @Html.TextBoxFor(m =&gt; m.Street, new { @class = "form-control" })
                                  @Html.ValidationMessageFor(m =&gt; m.Street)
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  @Html.LabelFor(m =&gt; m.ContactNumber)
                                  @Html.TextBoxFor(m =&gt; m.ContactNumber, new { @class = "form-control" })
                                  @Html.ValidationMessageFor(m =&gt; m.ContactNumber)
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  @Html.LabelFor(m =&gt; m.Employer)
                                  @Html.TextBoxFor(m =&gt; m.Employer, new { @class = "form-control" })
                                  @Html.ValidationMessageFor(m =&gt; m.Employer)
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  @Html.LabelFor(m =&gt; m.EmployerContactNumber)
                                  @Html.TextBoxFor(m =&gt; m.EmployerContactNumber, new { @class = "form-control" })
                                  @Html.ValidationMessageFor(m =&gt; m.EmployerContactNumber)
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  @Html.LabelFor(m =&gt; m.MonthlyIncome)
                                  @Html.TextBoxFor(m =&gt; m.MonthlyIncome, new { @class = "form-control", @type = "number" })
                                  @Html.ValidationMessageFor(m =&gt; m.MonthlyIncome)
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr /&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-9"&gt;
                  &lt;div class="pull-right"&gt;
                      @Html.AntiForgeryToken()
                      @Html.HiddenFor(m =&gt; m.AgentID)
                      &lt;a href="@Url.Action("Index","Agent")" class="btn btn-default"&gt;Cancel&lt;/a&gt;
                      &lt;button type="submit" class="@(Model.IsNew ? "btn  btn-primary" : "btn btn-success")"&gt;@(Model.IsNew ? "Save" : "Update")&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          @section scripts
          {
              @*@Scripts.Render("~/bundles/jqueryval")*@
          }
      }
  </code></pre>
  
  <p>when I add the <code>jqueryval</code> the validation on <code>FileTypes</code> and <code>FileSize</code> doesn't work anymore.. I'm guessing that it cannot read the <code>FileTypes</code> and <code>FileSize</code> Validation.</p>
  
  <p>Thanks in advance. </p>