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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

你可以找到一个例子来说明如何
如何：在 ASP.NET MVC 中实现远程验证