Question

我搜索并找到了很多答案，但仍然无法在我的jQuery UI对话框中验证字段。请建议适当的方法。

家长视图：

<div id="dialog" title="Add New">
    <p>Div content</p>
</div>

<script type="text/javascript">$(function () {
        $('#btnAddNew').click(function () {
            $('#dialog').dialog
            ({
                autoOpen: true,
                modal: true,
                open: function (event, ui) {
                    $(this).load("@Url.Action("AddNewFormPart1")"); //Rendering Partial View
                }
            });
        });
    });
<script/>

部分视图

@using (Html.BeginForm("SubmitFormPart1", "Home", FormMethod.Post, new { @id = "formPart1" }))
 {
    @Html.ValidationSummary()
    <div>......
    <input type="submit" value="Submit" id="btnSubmitFormPart1"/>
    </div>
 }

Answer 1

Validator应该在加载部分页面后解析部分页面。如果您使用的是不引人注目的验证：

$(this).load('@Url.Action("AddNewFormPart1")', function(response, status, xhr){
    var form = $("#AddNewFormPart1");
    form.removeData('validator');
    form.removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(form);
})

Answer 2

这是因为你的内容是在插件调用后加载的！您需要在加载部分视图后调用验证插件，如下所示（注意.done(function*({})帮助程序。）

<script type="text/javascript">$(function () {
    $('#btnAddNew').click(function () {
        alert('Add New clicked!');
        $('#dialog').dialog
        ({
            autoOpen: true,
            modal: true,
            open: function (event, ui) {
                $(this).load("@Url.Action("AddNewFormPart1")").done(function(){

                    //CALL YOUR VALIDATION PLUGIN HERE
                    //$('#formPart1').validate({...});
                }); //Rendering Partial View
            }
        });
    });
});

客户端验证无法在jQuery UI对话框中使用

2 个答案: