jquery 已加载部分视图的验证插件 ajax

Question

我正在使用 Jquery Validation 插件来验证我远程加载的部分视图表单模式。

var formDataSource = $('#frmDataSource').validate({
    rules: {
        provider: { required: true },
        stype: { required: true },
        url: { required: true },
        uname: { required: true, digits: true },
        pword: { required: true }
    },
    messages: {
        provider: { required: 'Please enter provider name' },
        stype: { required: 'Please select type' },
        url: { required: 'Please enter url' },
        uname: { required: 'Please enter user name' },
        pword: { required: 'Please enter password' }
    },
    errorPlacement: function(error, element) {
        error.insertAfter(element.parent());
    },
    submitHandler: function (form) {
         //submit form
    }
});

我的部分观点

<div class="modal-body no-padding">
    @using (Html.BeginForm("AddProvider", "DataSource", FormMethod.Post, new { id = "frmDataSource", @class = "smart-form" }))
    {
        <fieldset>
            <div class="row">
                <section class="col col-5">
                    <label class="select">
                        <i class="icon-append fa fa-question-circle"></i>
                        @Html.DropDownList("providers", ViewBag.ProviderSelectList as List<SelectListItem>, new { name = "provider", placeholder = "Provider Name" })
                        <i></i>
                    </label>
                </section>
                <section class="col col-3 col-lg-offset-3">
                    <label class="toggle">
                        @Html.CheckBoxFor(d => d.IsActive, new { name = "chkbxactive" })
                        <i data-swchon-text="ON" data-swchoff-text="OFF"></i>Active
                    </label>
                </section>

            </div>
            <div class="row">
                <section class="col col-5">
                    <label class="select">
                        <select name="stype" class="input-sm" required="">
                            <option value="1">FTP</option>
                        </select> <i></i>
                    </label>
                </section>
                <section class="col col-5">
                    <label class="input">
                        <i class="icon-append fa fa-question-circle"></i>
                        @Html.TextBoxFor(d => d.Address, new { name = "url", placeholder = "URI" })
                        <b class="tooltip tooltip-bottom-right"><i class="fa fa-warning txt-color-teal"></i> URI</b>
                    </label>
                </section>
            </div>
            <div class="row">
                <section class="col col-5">
                    <label class="input">
                        <i class="icon-append fa fa-question-circle"></i>
                        @Html.TextBoxFor(d => d.UserName, new { name = "uname", placeholder = "Username" })
                        <b class="tooltip tooltip-bottom-right"><i class="fa fa-warning txt-color-teal"></i> Username</b>
                    </label>
                </section>
                <section class="col col-5">
                    <label class="input">
                        <i class="icon-append fa fa-question-circle"></i>
                        @Html.TextBoxFor(d => d.Password, new { name = "pword", placeholder = "Password", type = "password" })
                        <b class="tooltip tooltip-bottom-right"> <i class="fa fa-warning txt-color-teal"></i> Password</b>
                    </label>
                </section>
            </div>
        </fieldset>
        <footer>
            <button type="button" class="btn btn-default" data-dismiss="modal">
                Cancel
            </button>
            <button id="btn-frmsubmit" type="submit" class="btn btn-info">
                Save
            </button>
        </footer>
    }
</div>

上面的代码没有验证和提交然后我试了这个

$(document).on('submit', '#frmDataSource', function(e) {
    e.preventDefault();
    var validator = $("#frmDataSource").validate({
        rules: {
            provider: { required: true },
            stype: { required: true },
            url: { required: true },
            uname: { required: true, digits: true },
            pword: { required: true }
        },
        messages: {
            provider: { required: 'Please enter provider name' },
            stype: { required: 'Please select type' },
            url: { required: 'Please enter url' },
            uname: { required: 'Please enter user name' },
            pword: { required: 'Please enter password' }
        },
        errorPlacement: function(error, element) {
            error.insertAfter(element.parent());
        }
    });

})

仍然没有提交我的代码有什么问题？表单远程加载时如何提交？

编辑

根据要求Sparky

只是验证不起作用，因为验证规则不是
正在申请。没有控制台错误，因为它不是错误。它不是应用验证规则。

此致

Answer 1

我已经解决了这个问题。我会 post 供参考。

我在使用 show.bs.modal 事件显示模态 window 之前分配了验证规则。（不在索引页上加载）这里是代码示例。

$('#btn-addDataSource').on('click', function() {
    $('#register-modal').load('@Url.Action("AddProvider", "DataSource")', function() {
        $(this).one('show.bs.modal', function() {
            var validator = $("#frmDataSource").validate({
                rules: {
                    provider: { required: true },
                    providerName: { required: true },
                    stype: { required: true },
                    Address: { required: true },
                    UserName: { required: true },
                    Password: { required: true }
                },
                messages: {
                    provider: { required: 'Please enter provider name' },
                    providerName: { required: 'Please enter provider name' },
                    stype: { required: 'Please select type' },
                    Address: { required: 'Please enter url' },
                    UserName: { required: 'Please enter user name' },
                    Password: { required: 'Please enter password' }
                },
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                }
            });
        }).modal({
            backdrop: 'static',
            keyboard: true
        });
    });
});

jquery 已加载部分视图的验证插件 ajax

jquery validation plugin with partial view ajax loaded

jquery

asp.net-mvc

jquery-validate

partial-views