0

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

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

        });

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

4

1 回答 1

0

当您指定一个 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 提交的。

希望这可以帮助！

于 2013-08-15T14:32:02.780 回答