Question

嗨朋友们，我正在研究MVC 4 Razor，我陷入困境   填写员工个人详细信息表格的地方   步骤（向导）..我使用jquery手风琴控制..为每一个   步骤我把手风琴..每个手风琴部分的html是   通过每次点击的ajax调用从局部视图渲染   相应的手风琴（即<h3></h3>标签）..

页面加载第一个/顶部手风琴默认处于活动状态。我的问题是   限制用户点击下一个手风琴直到他/她填满   目前活跃的手风琴正确..

这是我的完整代码：

查看：

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

我的控制器：

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

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

请有人帮忙..我听说过很多关于这个论坛的好事这是我的第一个问题...在此先感谢.. 我已经删除了我的jquery验证尝试，因为它创建了代码垃圾的东西现在我不知道写什么和写什么

Answer 1

如果您尝试验证在页面加载后通过Ajax添加到表单的数据，那么您将需要使用rules method并为这些新元素添加规则。 Jquery Validate无法知道它们。

示例

通过Ajax加载新内容后，您需要找到每个元素并为其添加必要的规则。

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

如果您使用不显眼的验证，您可能还需要添加新元素。有关详细信息，请参阅此SO question。

验证表格

要检查字段是否有效，您需要在点击时验证表单。这可以使用.validate()完成。然后，您可以使用.valid()
检查表单是否已经过验证
示例

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

Jquery手风琴验证通过$ .ajax调用渲染局部视图时不起作用

1 个答案:

验证表格