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中工作，需要花一些时间。

这就是我的所作所为：

用一个class form-group包围你的每个控件（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更改highlight和unhighlight的默认值：

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高亮显示和取消高亮显示代码，并为每个代码添加一行以添加/删除“已成功”＆＃39;并且“有错误”＃39;适当的课程。

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

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

1 个答案: