[英]ASP.Net MVC 3 client side validation with a dynamic form
我正在尝试进行手动验证,因此可以通过AJAX发布表单。
我还使用$("#formHolder").load(url);
动态加载表单$("#formHolder").load(url);
当我将页面加载到DIV中时,即使我的输入框为空,它也始终会验证为true。
即调用if($("#MyForm").valid()) //is always true
但是,如果我直接转到页面URL,它可以正常工作。
因此,在通过.load(url);
加载表单后,如何正确初始化表单.load(url);
因为它第一次打开时在页面上不存在
我的Javascript是
$('.myLink').click(function () {
var url = '/newsletter/info/'; // this loads my HTML form from another page/view at runtime
$("#formHolder").load(url, function () {
$("#MyForm").validate(); // I thought this line would initialise it once it loads
}).dialog({
modal: true,
width:800,
height: 600
});
return false;
});
加载表单后,手动调用$.validator.unobtrusive.parse()
我在这里找到了解决方案http://btburnett.com/2011/01/mvc-3-unobtrusive-ajax-improvements.html
最好的解决方案是在动态表单的ajax加载之后立即调用$.validator.unobtrusive.parse('#frmToBeValidated')
。
您的问题没有指定您是否需要做任何自定义来验证表单,所以我肯定会使用MVC3内置的jquery非侵入式验证:
如果这是您的模型:
public class Person
{
[Required(ErrorMessage = "Email address required")]
[DataType(DataType.EmailAddress, ErrorMessage = "Please enter valid email address")]
public string Email { get; set; }
}
您视图中的此表单代码将以最少的设置立即启用验证:
@model MvcApplication12.Models.Person
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Ajax.BeginForm(new AjaxOptions())) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Person</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
如果您希望在发布表单时获得更多功能,可以使用AjaxOptions:
new AjaxOptions() { UpdateTargetId = "formupdate",
OnSuccess = "javascript:alert('success');",
OnFailure = "javascript:alert('failure');",
OnComplete = "javascript:alert('complete');",
OnBegin = "javascript:alert('begin');" })
当表单提交,完成,失败或开始时,这使您可以完全控制自定义操作。
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.