在 MVC 应用程序中实现对文本框的验证状态答案

【问题标题】：implementing validation states to textbox in MVC application在 MVC 应用程序中实现对文本框的验证状态
【发布时间】：2014-04-07 15:36:34
【问题描述】：

在 bootstrap 3 中，我们可以将 Validation States 添加到我们的文本框中。

但是如果我必须在我的 MVC5 应用程序中实现并在用户键入时更改文本框的验证状态。我该怎么做？例如：

在我的模型中如果我有一些字段

[Required(ErrorMessageResourceType = typeof (Resource), ErrorMessageResourceName = "RegisterViewModel_FirstName_First_Name_is_required")]

在视野中

@Html.TextBoxFor(m=>m.Name)//change textbox according to state using Bootstrap 3 validation state?
@Html.ValidationMessageFor(m=>m.Name)

在网站中，他们只给出类名：

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

有人在他们的应用程序中实现了这一点吗？

知道如何在 MVC 应用程序中实现这一点真是太棒了。

我不知道如何实现。

【问题讨论】：

如果您有解决方案，请与我们分享，我也一样

标签： jquery html css asp.net-mvc twitter-bootstrap-3

【解决方案1】：

这篇博文有大部分解决方法：http://www.joe-stevens.com/2013/01/23/twitter-bootstrap-validation-styles-with-asp-net-mvc/comment-page-1/#comment-22194

我自己是新手，花了一些时间才让它在 bootstrap3/MVC5 中实际工作。

这就是我所做的：

用 form-group 类的 div 包围您的每个控件（MVC5 代码生成器会为您执行此操作 - 新 MVC5 项目的默认文本字段对我来说如下所示：

<div class="form-group">
    @Html.LabelFor(model => model.Artist, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Artist)
        @Html.ValidationMessageFor(model => model.Artist)
    </div>
</div>

然后告诉 jquery.Validator 更改高亮和取消高亮的默认值：

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');
        }
    }
});

这将采用默认的 jQuery.validator 突出显示和取消突出显示代码，并为每个代码添加一行以适当地添加/删除“has-success”和“has-error”类。

还要注意（因为这花了我一段时间才弄清楚） - 不要将调用 jQuery.validator.setDefaults 放在你的 $(document).ready 函数中，因为它似乎设置新的空验证器类的默认值，只需将其放在脚本块或 .js 文件的顶层即可。

【讨论】：