提问人:chobo2 提问时间:3/1/2011 最后编辑:chobo2 更新时间:4/15/2012 访问量:13300
如何使用 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?
问:
我正在使用
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。我不知道为什么。
答:
像这样的东西应该可以解决问题:
$("#my-button").click(function (event) {
event.preventDefault();
$("#my-form").validate();
if ($("#my-form").valid()) {
// ...
}
});
评论
这可以使用 ASP.NET MVC 的功能来完成。您所要做的就是使用一个属性来修饰要验证的属性,该属性传递执行验证的方法的名称以及它所在的控制器。Remote Validation
[Remote]
您可以找到一个示例,说明如何:在 ASP.NET MVC 中实现远程验证
评论
$("#my-button").click(function (event) {
event.preventDefault();
$.validator.unobtrusive.parse("#my-form");
if ($("#my-form").valid()) {
// ...
}
});
该问题可能是由于在最初加载不显眼的脚本后将元素添加到 DOM 中。您可以通过在创建对话框后调用来强制它附加验证处理程序新元素。$.validator.unobtrusive.parse("form")
$("<div></div>").dialog(...)
$.validator.unobtrusive.parse("form")
这解决了我们的类似问题,尽管我们在对话框中显示表单。
评论