title: ASP,NET -MVC5 client-side validation not working
body: <p>I need to do client-side validation for ASP.NET MVC5 application. What I want to achieve is; when user fill each field in form, its validated same time and change field color or border color to red as he/she going along with data entry in form.</p>
  
  <p>I have added all require details but for some reason it is not happening;</p>
  
  <h2>bundleConfig</h2>
  
  <pre><code>bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                      "~/Scripts/jquery-{version}.js"));
  
          bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));
  
          bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                      "~/Scripts/jquery.validate*",
                      "~/Scripts/jquery.validate.unobtrusive.js"));
  </code></pre>
  
  <h2>Main page Layout</h2>
  
  <p>I have added jquery in html header as;</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8" /&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;title&gt;@ViewBag.Title&lt;/title&gt;
                @Styles.Render("~/Content/css")
                @Styles.Render("~/Content/themes/base/ThemeCSS")
                @Scripts.Render("~/bundles/modernizr")
                @Scripts.Render("~/bundles/jquery")
    &lt;/head&gt;
    &lt;body&gt;
        //my other code....
        //at bottom
  
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/DefaultThemeScripts")
    @RenderSection("scripts", required: false)
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>Student Model class</h2>
  
  <p>this is form model class</p>
  
  <pre><code>public class Student
  {
      public Student(){}
  
      [Key]
      [Display(Name="Student ID")]
      public int StudentID { get; set; }
  
      [Display(Name = "Student UWL ID")]
      [Required(ErrorMessage="Require Your Student UWL ID")]
      [Range(0, Int32.MaxValue, ErrorMessage = "Only Number Allowed")]
      public int StudentNumber_UWLID { get; set; }
  
      [StringLength(50)]
      [Required(ErrorMessage = "Required Title")]
      [Display(Name = "Title")]
      public string Title { get; set; }
  
      [StringLength(50)]
      [Display(Name = "Other Title")]
      public string OtherTitle { get; set; }
  
      [StringLength(50)]
      [Required(ErrorMessage = "Required Gender")]
      [Display(Name = "Gender")]
      public string Gender { get; set; }
  
      [StringLength(250)]
      [Required(ErrorMessage = "Required First Name")]
      [Display(Name = "First Name")]
      public string FirstName { get; set; }
  
      [StringLength(250)]
      [Display(Name = "Middle Name")]
      public string MiddleName { get; set; }
  
      [StringLength(250)]
      [Required(ErrorMessage = "Required Last Name")]
      [Display(Name = "Last Name")]
      public string LastName { get; set; }
  
      [StringLength(250)]
      [Required(ErrorMessage = "Required Nationality")]
      [Display(Name = "Nationality")]
      public string Nationality { get; set; }
  
      [StringLength(250)]
      [Required(ErrorMessage = "Required Your Date Of Birth")]
      [Display(Name = "Date Of Birth")]
      public System.DateTime DateOfBirth { get; set; }
   }
  </code></pre>
  
  <h2>Razor form</h2>
  
  <pre><code>@model App.DAL.Model.Student
  
  &lt;script type="text/javascript"&gt;
  
  $('#CreateStudentProfileForm').submit(function (e) {
  
      e.preventDefault();
  
      var formURL = $(this).attr("action");
      $ajax({.....
     )};
   &lt;/script&gt;
  
  
  @using (Html.BeginForm("CreateStudentProfile", "StudentProfile", FormMethod.Post, new { id = "CreateStudentProfileForm" }))
  
  {
     @Html.AntiForgeryToken()
  
  &lt;div class="form-horizontal"&gt;
      &lt;h4&gt;Student&lt;/h4&gt;
      &lt;hr /&gt;
      @Html.ValidationSummary(true, "", new { @class = "text-danger" })
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.StudentNumber_UWLID, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.StudentNumber_UWLID, new { htmlAttributes = new { id = "StudentNumber_UWLID", @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.StudentNumber_UWLID, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.Title, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.Title, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.OtherTitle, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.OtherTitle, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.OtherTitle, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.Gender, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.Gender, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.FirstName, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.MiddleName, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.MiddleName, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.MiddleName, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.LastName, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.LastName, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.Nationality, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.Nationality, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model =&gt; model.Nationality, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              @Html.EditorFor(model =&gt; model.DateOfBirth, new { htmlAttributes = new { @class = "form-control datepicker" } })
              @Html.ValidationMessageFor(model =&gt; model.DateOfBirth, "", new  { @class = "text-danger" })
          &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;
  }
  
  &lt;div&gt;
       @Html.ActionLink("Back to My Profile Home Page", "MyProfile")
  &lt;/div&gt;
  </code></pre>
  
  <h2>Web.config</h2>
  
  <pre><code> &lt;appSettings&gt;
  &lt;add key="webpages:Version" value="3.0.0.0" /&gt;
  &lt;add key="webpages:Enabled" value="false" /&gt;
  &lt;add key="ClientValidationEnabled" value="true" /&gt;
  &lt;add key="UnobtrusiveJavaScriptEnabled" value="true" /&gt;
  &lt;/appSettings&gt;
  </code></pre>
  
  <h2>Controller class</h2>
  
  <pre><code>  [HttpGet]
      public ActionResult CreateStudentProfile()
      {
          return PartialView("CreateStudentProfile_Partial");
      }
  
      [HttpPost]
      public ActionResult CreateStudentProfile(Student _studentModel)
      {
          try
          {
              if(ModelState.IsValid)
              {
                 int _entityID =  _studentProfileServices.CreateNewStudentProfile(_studentModel);
  
                 if (_entityID != 0) 
                 {
                     return Json(new { Response = "Success" });
                 }
                 else
                 {
                     return Json(new { Response = "Error" });
                 }
              }
              else
              {
                  return Json(new { Response = "Invalid Entry" });
              }
          }
          catch (DataException ex)
          {
              ModelState.AddModelError("", "Unable To Create New Student Profile" + ex);
          }
  
          return PartialView("CreateStudentProfile_Partial", _studentModel);
      }
  </code></pre>