客户端验证未显示消息

Question

我有一个MVC4互联网应用程序,其中包含用于创建用户帐户的表单.表单验证有效,但输入验证失败时,不会显示错误消息.它仍然会阻止提交,直到验证问题得到解决但没有文本

剃刀查看表格

<h2>Create New Account</h2>
<fieldset>
    <legend></legend>
    @using (Html.BeginForm("CreateUser",null)){
        @Html.AntiForgeryToken()
        <table class="create">
            <tr>
                <td colspan="2"><b>New Account</b>
            </tr>
            <tr>
                <td>@Html.DisplayNameFor(model=>model.UserName)</td><td>@Html.TextBoxFor(model=>model.UserName)</td>
                <td>@Html.DisplayNameFor(model=>model.EmailAddress)</td><td>@Html.TextBoxFor(model=>model.EmailAddress)</td>
                <td><input type="submit" value="Create User" /></td>
            </tr>
        </table>
    }
</fieldset>
    @Html.ValidationSummary()

使用的包包括验证文件

bundles.Add(new ScriptBundle("~/bundles/asset").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate*",
            "~/Scripts/jquery.unobtrusive*"));

使用的模型是一个实体模型,我添加了一个部分类来注释验证要求

[MetadataType(typeof(UserProfileMetadata))]
public partial class UserProfile
{
    //Empty Class just required for adding class level attribute
}

public class UserProfileMetadata
{
    //Fields from user profile requiring annotations
    [EmailAddress]
    [Required]
    [Display(Name = "Email Address")]
    public string  EmailAddress { get; set; }

    [Required]
    public string UserName { get; set; }

}

验证工作,但现在显示该消息使我认为它必须是标记错误,但我只是看不到它.

Answer 1

在表单中移动ValidationSummary将修复它.

<h2>Create New Account</h2>
<fieldset>
    <legend></legend>
     @using (Html.BeginForm("CreateUser",null)){
        @Html.ValidationSummary()
        @Html.AntiForgeryToken()
        <table class="create">
            <tr>
                <td colspan="2"><b>New Account</b>
            </tr>
            <tr>
                <td>@Html.DisplayNameFor(model=>model.UserName)</td>    <td>@Html.TextBoxFor(model=>model.UserName)</td>
            <td>@Html.DisplayNameFor(model=>model.EmailAddress)</td><td>@Html.TextBoxFor(model=>model.EmailAddress)</td>
            <td><input type="submit" value="Create User" /></td>
        </tr>
    </table>
}
</fieldset>

Answer 2

对于那些不愿意被限制移动@Html.ValidationSummary到表单中的人来说,也就是说它存在于_Layout.cshtml中,而你喜欢它在那里,这就是解决这个问题的方法.

下面的方法显然是微软用来填充的方法@Html.ValidationSummary.在它的标准形式,它看起来data-valmsg-summary-true在$('this').this在这种情况下是调用表单.好吧,我的@Html.ValidationSummary生活在pageBody <div>_Layout.cshtml上,以保持干燥.

function onErrors(event, validator) { // '#pageBody' is the containing element
    var container = $('#pageBody').find("[data-valmsg-summary=true]"), 
    list = container.find("ul"); if (list && list.length && validator.errorList.length) {
        list.empty(); container.addClass("validation-summary-errors").removeClass("validation-summary-valid");
        $.each(validator.errorList, function () {
             $("<li />").html(this.message).appendTo(list);
        });
    }
}

到目前为止,我只是改变了这个:

var container = $('this').find("[data-valmsg-summary=true]")

对此:

var container = $('#pageBody').find("[data-valmsg-summary=true]")

现在,我通过点击按钮触发验证.为了解决问题onErrors(event, validator),我使用了以下jQuery:

    $('#btnSave').click(function () {
        if ($('form').valid()) {
           // Do stuff
        } else {
            onErrors(event, $('form').data('validator'));
        }
    });

Voila,@ Html.ValidationSummary甚至在使用jQuery.unobtrusive时也会填充.

非常感谢Leniel Macaferi在这里指出了正确的方向:http: //www.leniel.net/2013/08/customizing-aspnet-mvc-html-validation-summary-with-bootstrap-3-panel.html #sthash.jGRguVuV.qSjYUlhS.dpbs