jQuery UI 对话框验证

发布于 2024-12-28 07:06:18 字数 2617 浏览 0 评论 0 原文

我知道这是一个常见问题。我一直在查看本网站和其他地方提出的各种解决方案,但找不到适合我的情况的解决方案。

这是我的脚本:

$(function () {

    $('a.editPersonLink').live("click", function (event) {
        loadDialog(this, event, '#personList');
        $.validator.unobtrusive.parse('#editPersonContainer');
    });

    $(".deleteButton").live("click", function(e) {
        e.preventDefault();
        var $btn = $(this);
        var $msg = $(this).attr("title");

        confirmDelete($msg, 
            function() {
                deleteRow($btn, $target);
            });
    });

});

function loadDialog(tag, event, target) {
    event.preventDefault();
    var $loading = $('<img src="../../Content/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon">');
    var $url = $(tag).attr('href');
    var $title = $(tag).attr('title');
    var $dialog = $('<div></div>');
    $dialog.empty();
    $dialog
        .append($loading)
        .load($url)
        .dialog({
            autoOpen: false
            ,title: $title
            ,width: 800
            ,modal: true
            ,minHeight: 200
            ,show: 'slide'
            ,hide: 'clip'
        });

    $dialog.dialog( "option", "buttons", {
        "Save": function () {
            var dlg = $(this);
            $.ajax({
                url: $url,
                type: 'POST',
                data: $("#formData").serialize(),
                success: function (response) {
                    $(target).html(response);
                    dlg.dialog('close');
                    dlg.empty();
                    $("#ajaxResult").hide().html('Record saved').fadeIn(300, function () {
                        var e = this;
                        setTimeout(function () { $(e).fadeOut(400); }, 2500);
                    });
                },
                error: function (xhr) {
                    if (xhr.status == 400) 
                        dlg.html(xhr.responseText, xhr.status);     /* display validation errors in edit dialog */
                    else 
                        displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */

                }
            });
        },
        "Cancel": function() { 
            $(this).dialog("close");
            $(this).empty();
        }
    });

    $dialog.dialog('open');
};

在顶部附近,我试图通过以下语句使表单从对话框上的部分视图中识别验证:

$.validator.unobtrusive.parse('#editPersonContainer');

editPersonContainer 是包含加载到对话框中的部分视图中的数据的 div 的名称。

底线是验证不被认可。我是否在错误的位置调用 validator.unobtrusive.parse,或者我在这里遗漏了其他内容?

I know this is a common problem. I've been looking at the various solutions proposed on this site and elsewhere but cannot hit upon something that works in my situation.

Here is my script:

$(function () {

    $('a.editPersonLink').live("click", function (event) {
        loadDialog(this, event, '#personList');
        $.validator.unobtrusive.parse('#editPersonContainer');
    });

    $(".deleteButton").live("click", function(e) {
        e.preventDefault();
        var $btn = $(this);
        var $msg = $(this).attr("title");

        confirmDelete($msg, 
            function() {
                deleteRow($btn, $target);
            });
    });

});

function loadDialog(tag, event, target) {
    event.preventDefault();
    var $loading = $('<img src="../../Content/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon">');
    var $url = $(tag).attr('href');
    var $title = $(tag).attr('title');
    var $dialog = $('<div></div>');
    $dialog.empty();
    $dialog
        .append($loading)
        .load($url)
        .dialog({
            autoOpen: false
            ,title: $title
            ,width: 800
            ,modal: true
            ,minHeight: 200
            ,show: 'slide'
            ,hide: 'clip'
        });

    $dialog.dialog( "option", "buttons", {
        "Save": function () {
            var dlg = $(this);
            $.ajax({
                url: $url,
                type: 'POST',
                data: $("#formData").serialize(),
                success: function (response) {
                    $(target).html(response);
                    dlg.dialog('close');
                    dlg.empty();
                    $("#ajaxResult").hide().html('Record saved').fadeIn(300, function () {
                        var e = this;
                        setTimeout(function () { $(e).fadeOut(400); }, 2500);
                    });
                },
                error: function (xhr) {
                    if (xhr.status == 400) 
                        dlg.html(xhr.responseText, xhr.status);     /* display validation errors in edit dialog */
                    else 
                        displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */

                }
            });
        },
        "Cancel": function() { 
            $(this).dialog("close");
            $(this).empty();
        }
    });

    $dialog.dialog('open');
};

Right up near the top I am trying to cause the form to recognise the validation from the partial view on the dialog via the statement:

$.validator.unobtrusive.parse('#editPersonContainer');

editPersonContainer is the name of the div containing the data in the partial view loaded into the dialog.

The bottom line is that the validation is not recognised. Am I making the call to validator.unobtrusive.parse in the wrong place, or am I missing something else here?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

流绪微梦 2025-01-04 07:06:18

我最终更改了脚本以使用描述的技术 此处

验证现在可以在我的 jQuery UI 对话框上运行。

I ended up changing my script to use the techniques described here

Validation now works on my jQuery UI dialogs.

染年凉城似染瑾 2025-01-04 07:06:18

嗨,我提出你的问题,因为我正在寻找同样的问题。

我在 ajax 调用之前包含此内容以在客户端进行验证:

if (ModelState.IsValid) {}

上发表了一篇包含完整项目的文章

我在验证客户端/服务器 JqueryUI 对话框

Hi I came up to your question as I was looking for the same.

I include this before the ajax call to validate on client side:

if (ModelState.IsValid) {}

I make an article with the full project on

Validation client/Server JqueryUI Dialog

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文