Jquery Accordion Validation Not working when rende

Question

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. <h3></h3> tag)..

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..

Here is my full code:

View:

@model XXX.ViewModels.PersonalDetailsViewModel
@{
    ViewBag.Title = "PersonalDetails";
    Layout = "~/Views/Shared/Template.cshtml";
}
@using (Html.BeginForm("Lifestyle", "Apply", FormMethod.Post, new { id = "personalDetailForm" }))
{
    <div class="centerdiv margin_top20">
        <div class="row">
            @Html.ValidationSummary(true, "Please Correct the following errors:")
        </div>
        <div style="width: 1000px;">
            <div id="Personalaccordion" class="acordion_div" style="padding: 10px; float: left;">
                <h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetBasicDetailsView','personalDetailForm','BasicDetailsDiv');">
                    <p>
                        Basic Details<span id="BasicDetailsDivExp"></span>
                    </p>
                </h3>
                <div id="BasicDetailsDiv">
                </div>
                <h3 class="acordion_div_h3" onclick="javascript:PersonalModule.GetRenderingView('Apply/GetPersonalAddressView','personalDetailForm','PersonalAddressDiv');">
                    <p>
                        Address<span id="PersonalAddressDivExp"></span></p>
                </h3>
                <div id="PersonalAddressDiv">
                </div>
            </div>
            <ul id="conlitue_ul" style="margin-top: 20px;">
                <li style="margin-left: 140px;">
                    <input type="submit" class="compareBtn float_lt" value="Continue Buying >" id="continue" /></li>
            </ul>
        </div>
    </div>
}
@Scripts.Render("~/bundles/PersonalDetails")
<script type="text/javascript">

    PersonalModule.GetRenderingView('Apply/GetBasicDetailsView', '', 'BasicDetailsDiv');

</script>

My Controller:

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);
        }

My JS :

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 && errorResponse.status == 200) {
                    renderCurrentView(errorResponse.responseText)
                }
                else {
                    alert(errorResponse.responseText);
                }
            }
        });
    }

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

Answer 1

If you are trying to validate data that has been added to form via Ajax after page load then you will need to use the rules method and add rules for these new elements. Jquery Validate has no way of knowing about them otherwise.

Example

Once you have loaded your new content via Ajax you need to find each element and add the necessary rules to them.

$('#yourDiv').find(".newElements").rules("add", {
    required: true,
    messages: {
        required: "Bacon is required"
    }
});

If you are using unobtrusive validate you may need to add your new elements to that also. See this SO question for more details.

Validating the Form

To check if the fields are valid, you will need to validate the form on click. This can be done using .validate(). You can then check if the form validated using .valid()

Example

$('#yourForm').validate();

if(!$('#yourForm').valid()) {
    alert('Bacon is required');
}