如何在 Ajax 表单中使用 MVC3 客户端表单验证？

Question

整件事是，我希望能够在自定义编写的 Ajax 代码上使用 MVC3 的内置客户端验证。 （我说的是使用 HTML.BeginForm() 和 Ajax.BeginForm() 制作的表单中可用的验证）

我的模型如下所示：

public class BrandVewModel
    {
        public int ID { get; set; }

        [Display(Name = "Brand Name")]
        [Required(ErrorMessage = "Please fill in the blank!")]
        [StringLength(40, ErrorMessage = "The name must not be more than 40 characters long!")]
        public string Name { get; set; }
    }

我的视图看起来像这样：

@using (Ajax.BeginForm("Insert_Brand", "Admin", FormMethod.Post, new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <input value="Create"  type="submit" name="Create New Brand"  />

    <div id="result"></div>
}

如您所见，我使用的是Ajax.BeginForm()，这很好。显然，对于我的视图模型，如果用户将名称字段留空并单击提交按钮，他们将显示相应的错误，而不会将表单数据发送到服务器！ （因为它是客户端，表单验证，感谢 jQuery）

但我需要如下所示的简单表单（而不是 Ajax.BeginForm()）并具有所有客户端验证功能：

<form method="post" action="@Html.Action("Insert_Brand","Admin")">

    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <a onclick="CreateBrand()">Create Brand</a>

</form>

//    honestly I have no idea what 'custom-written ajax coding', or what I do here is called :p 

    <script type="text/javascript" >
            function CreateBrand() {
                var item = { Brand: { Name:$('#Name').val()} };
                $.ajax({
                    url: '/Admin/Insert_Brand',
                    type: "POST",
                    data: JSON.stringify(item),
                    dataType: "text json",
                    contentType: "application/json; charset=utf-8",
                    success: function (t) {
                        console.log(t);
                        $("#result").html(t);
                        return;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log("Failed!");
                        console.log("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
                    }
                });
            }
        </script>

正如我所说，当我使用这种 ajax 表单发布时，我需要向用户显示所有好的验证消息。但我不知道我怎么能做到这一点......

有什么办法吗？

Answer 1

客户端验证在您的情况下不起作用的原因是您已经硬编码了<form> 标签，因此没有任何东西可以实例化FormContext。如果没有 FormContext，像 TextBoxFor 这样的 HTML 助手不会发出任何 HTML5 data-* 验证属性，这些属性会被不显眼的框架使用。

所以只需使用Html.BeginForm 助手：

@using (Html.BeginForm("Insert_Brand", "Admin"))
{
    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <a onclick="CreateBrand()">Create Brand</a>
}

但我建议您使用提交按钮并订阅.submit() 事件，而不是订阅锚的onclick 事件。这样做的原因是，当焦点在文本框内时，用户可以按键盘上的 Enter 来提交表单，然后表单将通过正常请求提交。您的 AJAX 处理程序将永远不会运行。

所以：

@using (Html.BeginForm("Insert_Brand", "Admin", FormMethod.Post, new { id = "myForm" }))
{
    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <button type="submit">Create Brand</button>
}

然后在一个单独的 javascript 文件中：

$(function() {
    $('#myForm').submit(function() {

        var item = { Brand: { Name: $('#Name').val() } };
        $.ajax({
            url: this.action,
            type: this.method,
            data: JSON.stringify(item),
            contentType: 'application/json; charset=utf-8',
            success: function (t) {
                console.log(t);
                $('#result').html(t);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("Failed!");
                console.log("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
            }
        });

        return false;
    });
});

但是，如果出于某种神秘的原因，您坚持手动硬编码此 <form> 标记而不是使用为此目的而设计的帮助程序，您也可以通过在视图顶部添加以下行来手动创建 FormContext：

@{
    ViewContext.FormContext = new FormContext();
}

从而诱使 Html 助手相信它们在表单中，并强制它们发出 HTML5 data-* 验证属性。