客户端验证在jQuery UI对话框中不起作用

Question

I searched and found lot of answers, still i am not able to validate fields in my jQuery UI Dialog. Please suggest appropriate ways for the same.

Parent View:

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

Partial View:

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

Answer 1

Validator should parse partial page after loading partial page. if you are using Unobtrusive Validation:

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

Answer 2

It is because your content are loaded after the plugin call! You need to call the validation plugin after loading the partial view as follows(Notice the .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
            }
        });
    });
});