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

How to use asp.net mvc 3 jquery validate with a jquery dialog that does an ajax submit?

提问人:chobo2 提问时间:3/1/2011 最后编辑:chobo2 更新时间:4/15/2012 访问量:13300

问:

我正在使用

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.untrusive。我不知道为什么。

jquery asp.net-mvc-3 jquery-validate unobtrusive-javascript

评论

0赞 Omu 3/4/2011
mrgsp.md:8080/awesome/person 单击“提交”后单击“创建”

答:

9赞 Matt Greer 3/1/2011 #1

像这样的东西应该可以解决问题:

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

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

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

评论

1赞 chobo2 3/1/2011
我以为这也行得通,但我还是明白了。
0赞 Chris Holmes 11/29/2011
与@chobo2相同的问题。我回来了......缺少什么?
0赞 AbdouMoumen 3/1/2011 #2

这可以使用 ASP.NET MVC 的功能来完成。您所要做的就是使用一个属性来修饰要验证的属性,该属性传递执行验证的方法的名称以及它所在的控制器。Remote Validation[Remote]

您可以找到一个示例,说明如何:在 ASP.NET MVC 中实现远程验证

评论

0赞 chobo2 3/1/2011
我知道远程验证,但我认为这不是我需要的。我的意思是我正在检查字段是否为空。我认为我不需要为此向服务器进行查询。如果我在寻找重复的名字或其他东西,那么你。但不仅适用于空白字段。
0赞 AbdouMoumen 3/1/2011
好吧,对不起,只是你的问题有点模棱两可。
1赞 programad 11/8/2011 #3
$("#my-button").click(function (event) {
    event.preventDefault();

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

    if ($("#my-form").valid()) {
        // ...
    }
});
7赞 Clay 4/15/2012 #4

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

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

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

评论

0赞 carl 6/18/2012
这对我有用(我们通过 javascript 拉入表单,需要在提交时对其进行验证)。
0赞 Dr. Paul Jarvis 11/6/2012
这正是正在发生的事情!非常感谢,我花了一周的时间才找出为什么我的表单返回有效,即使没有内容并且属性在模型中设置为“必需”