如何使用 ajax 提交的 jquery 对话框使用 asp.net mvc 3 jquery validate？

Question

我正在使用

asp.net mvc 3 jQuery 验证 无障碍的javascript。

我正在尝试通过注释在服务器端编写所有验证，然后让 mvc 3 的新功能负责客户端。

我有一个对话框，上面有一个按钮（只是一个按钮不是提交按钮），我想通过 ajax 将数据发布到服务器。

因此，当用户单击按钮时，我会提交表单并返回 false 以取消回发。

我认为这会触发验证，但似乎并非如此。如何触发客户端验证？

编辑

<form method="post" id="TaskFrm" action="/Controller/Action">

            <input type="text" value="" name="Name" id="Name" data-val-required="Name field cannot be left blank" data-val-length-max="100" data-val-length="task cannot exceed 100 characters" data-val="true">
</form>

var $dialog = $('<div></div>').dialog(
            {
                width: 580,
                height: 410,
                resizable: false,
                modal: true,
                autoOpen: false,
                title: 'Basic Dialog',
                buttons:
                    {
                        Cancel: function ()
                        {
                            $(this).dialog('close');
                        },
                        'Create Task': function ()
                        {
                            var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function ()
                            {
                                alert('hi');
                                return false;
                            });

                            createSubmitFrmHandler .validate();
                            var a = createSubmitFrmHandler .valid();

                            alert(a);

                        }
                    }
            });

这总是返回 true。

编辑 2

如果我在表单中放置一个提交按钮，它将显示客户端验证（我使用 jquery 返回 false，如我的代码所示）。

所以这意味着我确实拥有脚本和所有东西，但是当我尝试以编程方式执行时，由于未知原因它无法正常工作。

编辑 3

我将 jquery validate && jquery.validate.unobtrusive 文件卡在了母版页中。但是，当我将它们粘贴在包含已加载字段的局部视图中，然后强制提交时，验证就会启动。

我不明白。我很确定路径是正确的，因为我只是将文件拖放到我的母版页中并且它找出了路径。将它放在局部视图中并不是真正的解决方案，因为我必须多次执行此操作，这意味着每次加载局部视图时，我都会得到这些文件的另一个副本。

编辑 4

我认为只是 jquery.validate.unobtrusive 由于某种原因每次都需要加载。我不知道为什么。

Answer 1

此问题可能是由于最初加载不显眼的脚本后将元素添加到 DOM。您可以在创建对话框后通过调用$.validator.unobtrusive.parse("form") 来强制它附加验证处理程序新元素。

$("<div></div>").dialog(...)
$.validator.unobtrusive.parse("form")

这解决了我们的类似问题，尽管我们在对话框中显示了表单。

Answer 2

$("#my-button").click(function (event) {
    event.preventDefault();

    $.validator.unobtrusive.parse("#my-form");

    if ($("#my-form").valid()) {
        // ...
    }
});

Answer 3

这可以使用名为Remote Validation 的 ASP.NET MVC 功能来完成。您所要做的就是使用 [Remote] 属性来装饰您想要验证的属性，该属性传递进行验证的方法的名称和它所在的控制器。

你可以找到一个例子 How to: Implement Remote Validation in ASP.NET MVC

Answer 4

这样的事情应该可以解决问题：

    $("#my-button").click(function (event) {
        event.preventDefault();

        $("#my-form").validate();

        if ($("#my-form").valid()) {
            // ...
        }
    });