logo标签列表

MVC4使用Razor和Twitter Bootstrap进行验证

twitter-bootstrapasp.net-mvc-4razorunobtrusive-validation
3

我需要在MVC4 Razor中验证我的输入。问题是，我想使用Twitter Bootstrap，然后为顶部的 div 设置错误消息类，就像这里所示：http://getbootstrap.com/css/#forms-control-states

我该如何更改父级 div 的类？

5个回答
16

接受的答案需要修改才能与Bootstrap 3一起使用。我已经成功地使用了以下内容，在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");
        }
    });
}();
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);
        }
    }
});

创建一个新的验证摘要部分（这样您就可以完全控制标记）：
@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 - 将“control-group”引用更改为“form-group”，并在第58行左右添加“controlGroupWrapper.AddCssClass("has-error");”）：

@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的解决方案可以工作，但它在客户端执行了相当多的操作，导致每次调用其中的某个方法（例如提交、页面加载、验证错误）时都会出现抖动。上述解决方案可以在不进行所有DOM循环的情况下满足您的所有需求。
在Bootstrap 3 with jQuery Validation Plugin中找到的各种答案涵盖了以上内容的大部分（尽管没有一个答案涵盖了所有内容），其中一部分归功于那里的各位发布者。
2

解决方案

将最后一个元素包含进来：

$.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
  • success

它通过查看全局变量$.validator.unobtrusive.options（除非您创建它，否则不存在）来实现此目的。 defaultOptions设置为$.validator.unobtrusive.options，而execInContext是一种方法，用于找到适用的方法在$.validator.unobtrusive.options中并使用原始参数执行该方法（以便原始MS方法不会被覆盖）。

2
我需要稍微编辑一下脚本。我在 Github 上添加了一个 fork :) https://gist.github.com/DerKnerd/6305155 - Knerd
现在的URL返回404错误。 - Unconquered82
0

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

这是为了使用来自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://dev59.com/-HRB5IYBdhLWcg3wSVYI#2916344
        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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接