带有动态表单的 ASP.Net MVC 3 客户端验证

Question

我正在尝试进行手动验证，以便可以通过 AJAX 发布我的表单。

另外我正在使用$("#formHolder").load(url);动态加载我的表单

当我将页面加载到 DIV 中时，它始终验证为 true，即使我的输入框是空的。

即致电if($("#MyForm").valid()) //is always true

但是，如果我直接转到页面 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;
});

Answer 1

在表单加载完成后手动调用$.validator.unobtrusive.parse()

我在这里找到了解决方案http://btburnett.com/2011/01/mvc-3-unobtrusive-ajax-improvements.html

Answer 2

最好的解决方案是调用$.validator.unobtrusive.parse('#frmToBeValidated')，在你的动态表单的ajax加载之后。

Answer 3

你的问题没有说明你是否需要做任何自定义来验证表单，所以我肯定会使用 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');" })

这使您可以在表单提交、完成、失败或开始时完全控制自定义操作。

希望这会有所帮助！