Bootstrap Validator and Ajax Begin Form Conflict in Partial Views, MVC

Question!

I am using Ajax.Begin Form to post data on a form without refreshing whole page, I need to validate the textbox, if it has value then the data should be posted else validation message should be shown, but the problem is validation and posting data are both occurring at same time. If I do not add jquery.unobtrusive-ajax.js file then my partial view would is returning as separate white page but validation is working and form is not posting until the textbox has value, BUT if I add jquery.unobtrusive-ajax.js file on page, it is posting data whether textbox has value or not. What is wrong with the code, I am not getting this at all. Please help I have spent two days tried my possible solutions and still no success.

This is my Main View(Parent View) having PartialView

<div id="div_SearchPatient2">
     @Html.Partial("SearchPatientPartial");                                                    
</div>

@Scripts.Render("~/bundles/jqueryval")

jqueryval is a bundle which has jquery.unobtrusive-ajax.js file.

  <div> 
     @using (Ajax.BeginForm("Search", "Patient", new { },
             new AjaxOptions
             {
               HttpMethod = "POST",
               UpdateTargetId = "patientfound"
             },
             new
             {
               @name = "SearchPatientForm",
               @id = "frmSearchPatient",

             }
             ))
             {
                 @Html.AntiForgeryToken()
                 <div class="form-title">
                     Enter MR Number to search patient
                 </div>

                 <div class="col-lg-4">
                    <div class="form-group">
                      <div class="col-lg-6">
                         <label class="control-label">MR Number</label>
                      </div>
                    <div class="col-lg-6">
                       <input type="text" class="form-control"    name="command" data-mask="999-99-99" placeholder="000-00-00" required data-bv-notempty="true" data-bv-notempty-message="MRNo. is required." />
                    </div>
                   </div>
                 </div>
                  <div class="form-group">
                    <div class="col-md-4">
                       <input class="btn btn-darkorange" type="submit" value="Search" />
                    </div>
                  </div>
                <div id="patientfound">
                   @Html.Partial("PatientFoundPartial")
                </div>
           }
</div>

Where patientfound is a div which will render details if found. I have given this in UpdateTargetId of AjaxBeginForm.

My Controller is returning PartialView

 [HttpPost]
 [ValidateAntiForgeryToken]
 public ActionResult Search(FormCollection collection, string id)
 {
    // some code to get data
    return PartialView("PatientFoundPartial");
 }


This video can help you solving your question :)
By: admin