ASP.NET MVC – jQuery Form Post Model Validation

ASP.NET MVC – jQuery Form Post Model Validation

   Add the Following Item on web.conf to make the Validation with AJAX Effective
 
   <appSettings>
      <add key="ClientValidationEnabled" value="true" />
      <add key="UnobtrusiveJavaScriptEnabled" value="true" />
   </appSettings>
 
   JavaScript File Required for Model Vaildation
 
   /Scripts/jquery-1.10.2.js
   /Scripts/jquery.unobtrusive-ajax.js ( NuGet – microsoft.jQuery.Unobtrusive.Ajax )
   /Scripts/jquery.validate.min.js ( NuGet – microsoft.jQuery.Unobtrusive.Ajax )
   /Scripts/jquery.validate.unobtrusive.min.js ( NuGet – microsoft.jQuery.Unobtrusive.Ajax )
 
   The Validation Function from jQuery / JavaScript File can be executed well from the HEAD Section or from the Page End.
 
   \Models\TestItem.cs – Model with Validation Annotation
 
   public class TestItem
   {
      [Required]
      public int ID { get; set; }
 
      [Required]
      public string Name { get; set; }
 
      [StringLength(10)]
      public string Desc { get; set; }
   }
 
   \Controllers\TestController.cs
 
   @model AJAXFormPost.Models.TestItem
 
   < style>
 
      body
      {
         font-family: Arial;
         font-size: 11pt;
         color:#000000;
      }
 
      #form
      {
         margin-top:20px;
      }
 
      .validation
      {
         margin: 4px 0px 3px 0px;
         display: block;
      }
 
      .validation, #validationsummary
      {
         color: #770000;
         cursor: none;
         font-size: 10pt;
         font-weight: bold;
      }
 
      .validation-summary-errors ul
      {
         list-style-type: none;
         padding-left: 0px;
         margin-bottom: 20px;
         cursor: none;
         margin: 7px 0px 5px 10px;
         display: block;
      }
 
      .validation-summary-errors
      {
         border: 1px solid #770000;
         border-radius : 4px;
         margin-top: 0px;
         margin-bottom: 12px;
      }
 
      #submitbtn
      {
         font-weight: bold;
         color: #000033;
         margin-top: 15px;
         font-size:11pt;
      }
 
      .form-control
      {
         line-height: 20px;
         height: 40px;
         color:#000000;
         margin:7px 5px 0px 0px;
         vertical-align:middle;
      }
 
      .label-cell
      {
         padding-right:7px;
      }
 
   </style>
 
   @using (Html.BeginForm("Form", "Test"))
   {
      @Html.AntiForgeryToken()
 
      < div id="form">
 
         @Html.ValidationSummary(false, "", new { @id = "validationsummary" })
 
         < table border="0" cellpadding="0" cellspacing="0" width="100%" style="">
 
            <tr>
               <td valign="top" width="100" class="label-cell">
                  < div class="form-control">
                     @Html.LabelFor(model => model.ID, htmlAttributes: new { @class = "" })
                  </div>
               </td>
               <td valign="top">
                  < div class="form-control">
                     @Html.EditorFor(model => model.ID, new { htmlAttributes = new { @class = "" } })
                  </div>
                  @Html.ValidationMessageFor(model => model.ID, "", new { @class = "validation" })
               </td>
            </tr>
 
            <tr>
               <td valign="top" width="100" class="label-cell">
                  < div class="form-control">
                     @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "" })
                  </div>
               </td>
               <td valign="top">
                  < div class="form-control">
                     @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "" } })
                  </div>
                  @Html.ValidationMessageFor(model => model.Name, "", new { @class = "validation" })
               </td>
            </tr>
 
            <tr>
               <td valign="top" width="100" class="label-cell">
                  < div class="form-control">
                     @Html.LabelFor(model => model.Desc, htmlAttributes: new { @class = "" })
                  </div>
               </td>
               <td valign="top">
                  < div class="form-control">
                     @Html.EditorFor(model => model.Desc, new { htmlAttributes = new { @class = "" } })
                  </div>
                  @Html.ValidationMessageFor(model => model.Desc, "", new { @class = "validation" })
               </td>
            </tr>
 
            <tr>
               <td>
                  <input id="submitbtn" type="submit" value="Save" />
               </td>
            </tr>
 
         </ table>
 
      </div>
 
   }
 
   \Views\Form.cshtml
 
   public class TestController : Controller
   {
      public ActionResult Form()
      {
         return View();
      }
 
      [HttpPost]
      public ActionResult Form(TestItem model)
      {
         if(!ModelState.IsValid)
            return View();
         else
            return RedirectToAction(“Result");
      }
 
      public ActionResult Result()
      {
         return View();
      }
   }
 

Remark : The Validation Summary cannot be performed from the Form Control Change with AJAX.