Question

我需要在MVC4剃须刀中验证我的输入。问题是，我想使用twitter bootstrap然后设置顶部div的错误消息类，如下所示：http://getbootstrap.com/css/#forms-control-states

如何更改父div的课程？

Answer 1

接受的答案需要修改才能使用Bootstrap 3.我已经使用following成功使用了MVC 4和Bootstrap 3。

$(function () {
 // any validation summary items should be encapsulated by a class alert and alert-danger
    $('.validation-summary-errors').each(function () {
        $(this).addClass('alert');
        $(this).addClass('alert-danger');
    });

    // update validation fields on submission of form
    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('has-error');
                    $(this).addClass('has-success');
                }
            });
        }
        else {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).removeClass('has-success');
                    $(this).addClass('has-error');
                }
            });
            $('.validation-summary-errors').each(function () {
                if ($(this).hasClass('alert-danger') == false) {
                    $(this).addClass('alert');
                    $(this).addClass('alert-danger');
                }
            });
        }
    });

    // check each form-group for errors on ready
    $('form').each(function () {
        $(this).find('div.form-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('has-error');
            }
        });
    });
});

var page = function () {
    //Update the validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".form-group").addClass("has-error");
            $(element).closest(".form-group").removeClass("has-success");
        },
        unhighlight: function (element) {
            $(element).closest(".form-group").removeClass("has-error");
            $(element).closest(".form-group").addClass("has-success");
        }
    });
}();

Answer 2

你试过这个剧本吗？

http://blog.ijasoneverett.com/2013/05/asp-net-mvc-validation-with-twitters-bootstrap/

我使用类似的东西来获得bootstrap和mvc验证来发挥很好的

Answer 3

修改验证器默认值：

// Override jquery validate plugin defaults in order to utilize Twitter Bootstrap 3 has-error, has-success, etc. styling.
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error').removeClass('has-success');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

创建一个新的验证摘要partial（这样您就可以完全控制标记）：

@model ModelStateDictionary

<div class="@(Html.ViewData.ModelState.IsValid ? "validation-summary-valid" : "validation-summary-errors") panel panel-danger" data-valmsg-summary="true">
    <div class="panel-heading">
        Please, correct the following errors:
    </div>
    <div class="panel-body">
        <ul>
            @foreach (var modelError in Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
</div>

在CSS中添加一种样式（在初始加载时隐藏验证摘要，而不需要依赖客户端脚本来在事后隐藏它）：

.validation-summary-valid { 
    display: none; 
}

在您的视图中呈现替代验证摘要，而不是@ Html.ValidationSummary（）：

   @{Html.RenderPartial("_HtmlValidationSummary", ViewData.ModelState);}

你很高兴去。哦，为了获得复选框和收音机的漂亮样式，根据您的设置，上面的脚本将捕获它，但最简单的是简单地修改你的ie Boolean.cshtml部分如下（其中Html.FormGroupFor只是一个https://github.com/erichexter/twitter.bootstrap.mvc/blob/master/src/Bootstrap/BootstrapSupport/ControlGroupExtensions.cs的略微更新版本 - 只需更改＆＃34; control-group＆＃34;引用＆＃34; form-group＆＃34;并添加＆＃34; controlGroupWrapper.AddCssClass（＆＃34; has-错误＆＃34;）;＆＃34;在第58行＆＃39; ish）：

@using Bctf.Web.HtmlHelpers
@model bool?

@using (Html.FormGroupFor(x => Model))
{
    <label class="checkbox">
        @Html.CheckBox("", Model.HasValue && Model.Value, new { @class = "tickbox-single-line" }) @ViewData.ModelMetadata.DisplayName
    </label>
    @Html.ValidationMessageFor(x => Model, string.Empty, new { @class = "help-block" })
}

以上所有内容都是我从许多不同地点找到的各种解决方案的汇编。 Ben的上述解决方案可以工作，但它确实有一点客户端，只要调用其中的某个方法（即post，page load，validation error）就会导致抖动。如果没有所有DOM循环，上面所做的就是你需要的所有东西。

在Bootstrap 3 with jQuery Validation Plugin找到的各种答案涵盖了上述的大部分内容（并且上面的很大一部分都归功于那里的各种海报，尽管没有一个答案涵盖所有海报）。

Answer 4

<强>解决方案

包括最后一次：

$.validator.unobtrusive.options = {
    errorPlacement: function (error, element) {        
        $(element).closest(".form-group").addClass("has-error");
    }
    , success: function (label, element) {
        $(element).closest(".form-group").removeClass("has-error");        
    }
}

目前在jquery.validate.unobtrusive.js中，以下代码显示了MS如何允许自我扩展：

options: {  // options structure passed to jQuery Validate's validate() method
    errorClass: defaultOptions.errorClass || "input-validation-error",
    errorElement: defaultOptions.errorElement || "span",
    errorPlacement: function () {
        onError.apply(form, arguments);
        execInContext("errorPlacement", arguments);
    },
    invalidHandler: function () {
        onErrors.apply(form, arguments);
        execInContext("invalidHandler", arguments);
    },
    messages: {},
    rules: {},
    success: function () {
        onSuccess.apply(form, arguments);
        execInContext("success", arguments);
    }
}

允许您基本上覆盖/扩展以下选项：

errorClass
errorElement
errrorPlacement
invalidHandler
成功

它通过查看全局变量$.validator.unobtrusive.options（除非你创建它不存在）来做到这一点。 defaultOptions设置为$.validator.unobtrusive.options，execInContext是一种在$.validator.unobtrusive.options中查找适用方法并使用原始参数执行它的方法（因此原始MS方法不会得到破坏）。

Answer 5

我喜欢在服务器端添加类，而不是客户端，因此，我的解决方案没有javascript（在我的情况下，它是一个简单的系统，表单上只有2或3个字段）。

这是使用与Form相同的结构 - ＆gt;来自Bootstrap文档的验证状态，可在http://getbootstrap.com/css/#forms-control-validation

中找到

首先，我创建了一个Html Helper来检查ModelState是否有效，如果该字段有错误，则返回一个字符串（类名）。我可以直接在视图上完成这个，但我喜欢更清晰的视图。所以，我的班级：

public static class ErrorHelper
{
    private static string GetPropertyName<TModel, TValue>(Expression<Func<TModel, TValue>> expression)
    {
        // Get field name
        // Code from: https://stackoverflow.com/a/2916344/4794469
        MemberExpression body = expression.Body as MemberExpression;
        if (body != null) return body.Member.Name;

        UnaryExpression ubody = expression.Body as UnaryExpression;
        if (ubody != null) body = ubody.Operand as MemberExpression;

        return body?.Member.Name;
    }

    public static MvcHtmlString ReturnOnError<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, string @class)
    {
        var propertyName = GetPropertyName(expression);
        if (propertyName == null)
            return MvcHtmlString.Empty;

        if (htmlHelper.ViewData.ModelState.IsValid || !htmlHelper.ViewData.ModelState.ContainsKey(propertyName))
            return MvcHtmlString.Empty;

        return htmlHelper.ViewData.ModelState[propertyName].Errors.Any()
            ? MvcHtmlString.Create(@class)
            : MvcHtmlString.Empty;
    }
}

进口：

using System;
using System.Linq;
using System.Linq.Expressions;
using System.Web.Mvc;

现在，在我的视图中，我只需要使用类，如：

<div class="form-group @Html.ReturnOnError(m => m.Name, "has-error")">
    @Html.LabelFor(m => m.Name, new { @class = "control-label" })
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Name, null, new { @class = "help-block" })
</div>

用razor和twitter bootstrap进行MVC4验证

5 个答案: