客戶端驗證在jQuery UI對話框中不起作用

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

加載部分頁面后，驗證程序應解析部分頁面。 如果您使用的是非侵入式驗證：

$(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*({}) helper）。

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