Question

我正在使用MVC4。

我有一个使用[Required()]验证属性修饰的ViewModel。

提交表单时，会触发客户端验证并以串联方式显示（使用验证摘要），因此一切正常。

如何在对话框中显示验证而不是内联？

以下是MVC 4 Internet应用程序模板的示例代码

public class RegisterModel
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
    }


@model MvcApplication2.Models.RegisterModel
@{
    ViewBag.Title = "Register";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>Create a new account.</h2>
</hgroup>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
        </ol>
        <input type="submit" value="Register" />
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

因此，当我单击文本框中没有任何数据的提交按钮时，错误消息将显示在验证摘要的顶部。

目前我正在使用Kendo ui对话框来显示服务器返回的所有错误。所以我要做的是统一错误消息，以便它们以类似的方式显示。

目前我只是想知道如何挂钩到客户端验证，所以我可以使用错误详细信息调用Kendo ui对话框。

由于

Answer 1

如果提交时无法提交所有@Html.ValidationMessageFor( ...，则调用会显示一个对话框并显示numberOfInvalids()，您可以检索错误及其消息，并在对话框中显示它们。

Answer 2

我需要的只是以下内容，Jquery验证

$(function () {
    $("form").bind("invalid-form", function (e, validator) {
        //your logic
    });
});

非常感谢Dan在Kendo UI

MVC 4客户端验证将在对话框中显示

2 个答案: