title: Jquery Accordion Validation Not working when rendering Partial View through $.ajax call
body: <blockquote>
    <p>Hi friends,I am working on MVC 4 Razor and I am stuck in a situation
    where Employee Personal Details form is to be filled in
    steps(wizard)..for which i used jquery accordion control..for every
    step i put an accordion..The html in each accordion section is
    rendered from partial view through ajax call on every click of
    respective accordion (i.e. <code>&lt;h3&gt;&lt;/h3&gt;</code> tag)..</p>
    
    <p>On page load first/top accordion is active by default. My problem is
    to restrict the user to click on next accordion until he/she fills the
    presently active accordion correctly..</p>
    
    <p>Here is my full code:</p>
    
    <p>View:</p>
  </blockquote>
  
  <pre><code>@model XXX.ViewModels.PersonalDetailsViewModel
  @{
      ViewBag.Title = "PersonalDetails";
      Layout = "~/Views/Shared/Template.cshtml";
  }
  @using (Html.BeginForm("Lifestyle", "Apply", FormMethod.Post, new { id = "personalDetailForm" }))
  {
      &lt;div class="centerdiv margin_top20"&gt;
          &lt;div class="row"&gt;
              @Html.ValidationSummary(true, "Please Correct the following errors:")
          &lt;/div&gt;
          &lt;div style="width: 1000px;"&gt;
              &lt;div id="Personalaccordion" class="acordion_div" style="padding: 10px; float: left;"&gt;
                  &lt;h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetBasicDetailsView','personalDetailForm','BasicDetailsDiv');"&gt;
                      &lt;p&gt;
                          Basic Details&lt;span id="BasicDetailsDivExp"&gt;&lt;/span&gt;
                      &lt;/p&gt;
                  &lt;/h3&gt;
                  &lt;div id="BasicDetailsDiv"&gt;
                  &lt;/div&gt;
                  &lt;h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetPersonalAddressView','personalDetailForm','PersonalAddressDiv');"&gt;
                      &lt;p&gt;
                          Address&lt;span id="PersonalAddressDivExp"&gt;&lt;/span&gt;&lt;/p&gt;
                  &lt;/h3&gt;
                  &lt;div id="PersonalAddressDiv"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;ul id="conlitue_ul" style="margin-top: 20px;"&gt;
                  &lt;li style="margin-left: 140px;"&gt;
                      &lt;input type="submit" class="compareBtn float_lt" value="Continue Buying &gt;" id="continue" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  @Scripts.Render("~/bundles/PersonalDetails")
  &lt;script type="text/javascript"&gt;
  
      PersonalModule.GetRenderingView('Apply/GetBasicDetailsView', '', 'BasicDetailsDiv');
  
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>My Controller:</p>
  </blockquote>
  
  <pre><code>public ActionResult PersonalDetails(int leadId)
          {
              var personalDetailsViewModel = LeadHelper.GetPersonalDetails(leadId);
              return View(personalDetailsViewModel);
          }
  
          public ActionResult GetBasicDetailsView(PersonalDetailsViewModel personalDetailsViewModel)
          {
              if (personalDetailsViewModel.BasicDetails == null)
              {
                  ModelInitializerHelper.InitilaizeBasicDetailsVModel(personalDetailsViewModel);
              }
  
              ModelInitializerHelper.InitializeBasicLookup(personalDetailsViewModel);
  
              return PartialView("Personal/BasicDetails", personalDetailsViewModel);
          }
  
          public ActionResult GetPersonalAddressView(PersonalDetailsViewModel personalDetailsViewModel)
          {
              if (personalDetailsViewModel.PersonalAddressDetails == null)
              {
                  ModelInitializerHelper.IntializePersonalAddressVModel(personalDetailsViewModel);
              }
  
              ModelInitializerHelper.InitializePersonalAddressLookup(personalDetailsViewModel);
  
              return PartialView("Personal/PersonalAddress", personalDetailsViewModel);
          }
  </code></pre>
  
  <blockquote>
    <p>My JS :</p>
  </blockquote>
  
  <pre><code>var PersonalModule = {
  
      GetRenderingView: function (url, formId, containerID) {
  
              var applicationurl = ApplicationRoot + '/' + url;
              var objects = $('#BasicDetailsDivExp , #PersonalAddressDivExp' );
              viewDivID = containerID;           
              GetAccordionView(applicationurl, formId, objects, containerID, 'accordion_plus', 'accordion_minus');
  
      }
  }
  
  GetAccordionView: function (url, formId, objects, containerID, accordion_plus, accordion_minus) {
  
          var formObjectData = null;
          if (formId != undefined) {
              formObjectData = $("#" + formId).serialize();
          }
          var renderView = function (data) {
              $('#' + containerID).innerHtml = data;
          }
          ExpandAccordion(objects, containerID, accordion_plus, accordion_minus);
  
          DoServerRequest(url, formObjectData, renderView);
  
      }
  
      ExpandAccordion: function (objects, spanIconID, accordion_plus, accordion_minus) {
          var Objects = objects;
          Objects.removeClass(accordion_minus);
          Objects.addClass(accordion_plus);
  
          $('#' + spanIconID + 'Exp').removeClass(accordion_plus).addClass(accordion_minus);
  
          if (Browser.ie7) {
              Objects.css("margin-top", "-22px");
          }
      }
   DoServerRequest: function (url, data, funSuccess) {
          $.ajax({
              type: "POST",
              url: url,
              data: data,
              async: false,
              dataType: "json",
              success: funSuccess,
              error: function (errorResponse) {
                  if (errorResponse.readyState == 4 &amp;&amp; errorResponse.status == 200) {
                      renderCurrentView(errorResponse.responseText)
                  }
                  else {
                      alert(errorResponse.responseText);
                  }
              }
          });
      }
  </code></pre>
  
  <blockquote>
    <p>Please somebody help..I have heard lots of good thing about this forum
    and this is my first Question...Thanks in advance..
    I have removed my jquery validation attempt as it made the code
    garbage thing Now I dont know what to write and where to write</p>
  </blockquote>