Question

为什么验证不起作用？我有一个链接，当单击时打开一个对话框从部分视图加载其内容。我想在单击对话框上的按钮时验证表单。我在布局文件中加载了验证脚本。

$dialog  = $<'<div></div>');
$('.linkClass').click(function (e) {
            e.preventDefault();
            $.ajax({
                url: this.href,
                type: "GET",
                success: function (result) {
                    $dialog.load(this.url).dialog({
                        resize: "auto",
                        width: 490,
                        height: 430,
                        modal: true,
                        buttons: {
                            Save: function () {
                                if ($dialog.find('form:first').valid()) {
                                    $.ajax({
                                        url: "/Home/Dates",
                                        type: "POST",
                                        data: $('form').serialize(),
                                        datatype: "html",
                                        success: function (result) {
                                            $dialog.dialog('close');
                                        },
                                        error: function (xhr, testStatus, error) {alert("Error occured: " + error + " " + xhr + " " + testStatus) }
                                    });*/
                                }
                                else { alert("Please correct the errors on the form") }
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                   $.validator.unobtrusive.parse($dialog.find('form:first').valid());
                    $dialog.dialog('open');

                },

                error: function (request, status, error) {
                    alert(request.responseText);
                }
            });

        });

然而，这不起作用。我可以看到我的验证脚本已正确加载。此外，当我在对话框中加载的局部视图中添加脚本时，验证效果很好。为什么会这样？为什么我需要在两个地方加载这些脚本？

Answer 1

指定jQuery函数时 $（'。linkClass'）。click（function（e）{... 它必须在加载/生成具有类ID .linkClass的元素之后执行。 jQuery将其嵌套函数的副本附加到该类中的每个元素，因此如果在页面完全加载之前执行jQuery，它将不会验证。尝试将此jQuery函数嵌套在JavaScript函数中，并在页面加载时执行它。

function whenLoaded(){
    $('.linkClass').click(function (e) {
        e.preventDefault();
        $.ajax({
            url: this.href,
            type: "GET",
            success: function (result) {
                $dialog.load(this.url).dialog({
                    resize: "auto",
                    width: 490,
                    height: 430,
                    modal: true,
                    buttons: {
                        Save: function () {
                            if ($dialog.find('form:first').valid()) {
                                $.ajax({
                                    url: "/Home/Dates",
                                    type: "POST",
                                    data: $('form').serialize(),
                                    datatype: "html",
                                    success: function (result) {
                                        $dialog.dialog('close');
                                    },
                                    error: function (xhr, testStatus, error) {alert("Error occured: " + error + " " + xhr + " " + testStatus) }
                                });*/
                            }
                            else { alert("Please correct the errors on the form") }
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
}

此外，我建议不要将AJAX请求嵌套在父AJAX请求的成功函数中。您应该在纯JavaScript中验证您的for，并在成功时调用AJAX请求。您不应该为AJAX请求使用表单，因为表单是使用POST而不是AJAX提交的。

希望这有帮助！

MVC JQuery对话客户端验证

1 个答案: