jquery - 在 MVC 应用程序中对文本框实现验证状态

Question

在 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 应用程序中实现它会很棒。

我不知道如何实现这个。

Answer 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”类。

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