将Twitter Bootstrap验证样式和消息应用于ASP.NET MVC验证

Question

如何集成ASP.NET MVC不显眼验证和Twitter Bootstrap？我希望适当地拥有所有这些验证消息和样式.

Answer 1

如果你使用Bootstrap 2,一个很好的处理方法是......

将此添加到您的_Layout.cshtml:

<script type="text/javascript">

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.control-group').removeClass('success').addClass('error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.control-group').removeClass('error').addClass('success');
        }
    }
});

$(function () {

    $("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
    $("div.control-group").has("span.field-validation-error").addClass('error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");

});

</script>

这些是我在上面找到代码的帖子:

将Bootstrap错误样式与MVC的不显眼错误验证集成

ASP.NET MVC的Twitter Bootstrap验证样式

MVC Twitter Bootstrap不显眼的错误处理

UPDATE

现在我需要在使用Bootstrap 3时也这样做.以下是类名更改后所需的修改:

<script type="text/javascript">

    jQuery.validator.setDefaults({
        highlight: function (element, errorClass, validClass)
        {
            if (element.type === 'radio')
            {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else
            {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            }
        },
        unhighlight: function (element, errorClass, validClass)
        {
            if (element.type === 'radio')
            {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else
            {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            }
        }
    });

$(function () {

    $("span.field-validation-valid, span.field-validation-error").addClass('help-block');
    $("div.form-group").has("span.field-validation-error").addClass('has-error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-danger");

});

</script>

Answer 2

复制css文件中验证器的css并更改颜色accordinlgly.这样的事应该做

.field-validation-error {
    color: #b94a48;
    display: inline-block;
    *display: inline;
    padding-left: 5px;
    vertical-align: middle;
    *zoom: 1;
}

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

.input-validation-error {
    /*
    border: 1px solid #ff0000;
    background-color: #ffeeee;
    */
    color: #b94a48;
    border-color: #b94a48;
}

.input-validation-error:focus {
  border-color: #953b39;
  -webkit-box-shadow: 0 0 6px #d59392;
  -moz-box-shadow: 0 0 6px #d59392;
  box-shadow: 0 0 6px #d59392;
}

.validation-summary-errors {
    /*font-weight: bold;*/
    color: #b94a48;
}

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

Answer 3

我建议以较少的格式包含Bootstrapper并执行与Iridio建议相同的操作,但是在.less.这样你可以有类似的东西:

.validation-summary-errors
{
    .alert();
    .alert-error();
}
.field-validation-error 
{
    .label();
    .label-important();
}

所以当bootstrapper改变时你会自动获取更改.处理MVC默认可见性的常规样式Site.css将保留在原位并处理可见性.

Answer 4

为什么不使用css!important并将其称为一天:

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00 !important;
}

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

.input-validation-error {
    border: 1px solid #f00 !important;
    background-color: #fee !important;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

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

Answer 5

在Bootstrap 3上你必须添加:

.validation-summary-errors
{
    .alert();
    .alert-danger();
}
.field-validation-error 
{
    .label();
    .label-danger();
}

你会看到类似的东西:

Answer 6

对于ValidationSummary,您可以使用允许您指定的重载htmlAttributes.这允许您将其设置为使用Twitter Bootstrap警报css样式.

@Html.ValidationSummary(string.Empty, new { @class = "alert alert-danger" })

对于ValidationMessage和ValidationMessageFor辅助方法存在类似的重载.