title: MVC Model validation with bootstrap in ajax submit
body: <p>I am working in a MVC application. I am validating the form fields by using mvc model data annotations.
    like below.</p>
  
  <pre><code>public class CustomerViewModel
  {
      [Required]
      public string Name {get;set;}
  }
  </code></pre>
  
  <p>I am just using this model in my page and I am submitting my form by using <code>$.ajax</code> 
  I am using the below method to get the validation errors while submitting through ajax.</p>
  
  <pre><code>public class AjaxValidationAttribute : ActionFilterAttribute
      {
          public override void OnActionExecuting(ActionExecutingContext filterContext)
          {
              //base.OnActionExecuting(filterContext);
              if (!filterContext.HttpContext.Request.IsAjaxRequest())
                  return;
  
              var modelState = filterContext.Controller.ViewData.ModelState;
  
              if (!modelState.IsValid)
              {
                  var errorModel = from x in modelState.Keys
                                   where modelState[x].Errors.Count &gt; 0
                                   select new
                                   {
                                       key = x,
                                       errors = modelState[x].Errors.Select(t =&gt; t.ErrorMessage).ToArray()
                                   };
                  filterContext.Result = new JsonResult()
                  {
                      Data = new { Errors = errorModel }
                  };
  
                  filterContext.HttpContext.Response.StatusCode = (int)HttpStatusCode.OK;
  
  
  
              }
          }
      }
  </code></pre>
  
  <p>And my action method will be,</p>
  
  <pre><code>        [HttpPost]
          [AjaxValidation]
          public ActionResult SaveCustomer(CustomerViewModel CommentViewModel)
          {
              return Json("Customer added successfully");
          }
  </code></pre>
  
  <p>I am just calling the above method from <code>$.ajax</code> like below</p>
  
  <pre><code>function saveCustomer() {
  
      var customerViewModel = {};
  
      customerViewModel.Name = $('#txtName').val();
      $.ajax({
          url: '/Customer/SaveCustomer',
          type: 'POST',
          data: JSON.stringify(customerViewModel),
          dataType: 'json',
          contentType: 'application/json; charset=utf-8',
          success: function (data, textStatus, jqXHR) {
  
              if (data.Errors != undefined) {
                  for (var i = 0; i &lt; data.Errors.length; i++) {
                      // Getting error list in data.Errors
                  }
              }
          }
      });
  };
  </code></pre>
  
  <p>I am getting the error in <code>data.Errors</code> object and I can able to get the field name and error message. 
    Here I just want to show this error message for the text box. like, bootstrap formvalidation (<a href="http://formvalidation.io/examples/changing-tooltip-position/" rel="nofollow">http://formvalidation.io/examples/changing-tooltip-position/</a>).</p>
  
  <p>How can I show the error messages like bootstrap formvalidation?</p>