Question

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

Razor查看表格

<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中，并且你喜欢它，这里有一种解决方法。

以下方法显然是Microsoft用来填充@Html.ValidationSummary的方法。在其标准格式中，它会在data-valmsg-summary-true中查找$('this')。在这种情况下，this是调用表单。好吧，我的@Html.ValidationSummary住在_Layout.cshtml上的pageBody <div>，以保持干净。

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

客户端验证未显示消息

2 个答案: