添加bootstraph glyphicon动态在asp.net mvc的形式不引人注目的验证

Question

我有以下的javascript成功地把红色的边框，并根据绿色边框来引导

请检查线路 - （相关该问题的行）

(function ($) { 
    var defaultOptions = { 
     errorClass: 'has-error', 
     validClass: 'has-success', 
     validIcon: 'glyphicon glyphicon-ok form-control-feedback', 
     invalidIcon: 'glyphicon glyphicon-remove form-control-feedback', 
     highlight: function (element, errorClass, validClass, validIcon, invalidIcon) { 
      $(element).closest(".form-group") 
      .addClass(errorClass) 
      .removeClass(validClass); 
      debugger; 
      -$(element).next() 
      -.addClass(invalidIcon) 
      -.removeClass(validIcon); 
     }, 
     unhighlight: function (element, errorClass, validClass, validIcon, invalidIcon) { 
      $(element).closest(".form-group") 
      .removeClass(errorClass) 
      .addClass(validClass); 
      debugger; 
      -$(element).next() 
      --.removeClass(invalidIcon) 
      --.addClass(validIcon); 
     } 
    }; 

    $.validator.setDefaults(defaultOptions); 

    $.validator.unobtrusive.options = { 
     errorClass: defaultOptions.errorClass, 
     validClass: defaultOptions.validClass, 
    }; 
})(jQuery); 

}

的剃刀查看其是这样的：

<div class="form-group"> 

      @Html.LabelFor(model => model.FechaHasta, new { @class = "col-sm-2 control-label" }) 
      <div class="col-sm-10"> 
       @Html.EditorFor(model => model.FechaHasta, new { htmlAttributes = new { @class = "form-control" } }) 
       <span class="icon" aria-hidden="true"></span> 
       <div class="help-block"> 
        @Html.ValidationMessageFor(model => model.FechaHasta) 
       </div> 
      </div> 

     </div> 

屏幕截图

问题：我如何可以通过dinamically添加glyphicons，以便当字段有效时根据boostrapframework显示绿色检查以及何时无效显示红色字符。

http://screencast.com/t/Oat8DvZnsy

它应该表现出这样的： http://screencast.com/t/irp2fafnGx

http://getbootstrap.com/css/#forms

Answer 1

更改您的HTML

<div class="form-group has-feedback"> 
    @Html.LabelFor(model => model.FechaHasta, new { @class = "col-sm-2 control-label" }) 
    <div class="col-sm-10"> 
     @Html.EditorFor(model => model.FechaHasta, new { htmlAttributes = new { @class = "form-control" } }) 
     <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
     <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> 
     <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
     <div class="help-block"> 
      @Html.ValidationMessageFor(model => model.FechaHasta) 
     </div> 
    </div> 
</div> 

，并添加CSS像这样

.form-group.has-feedback > .form-control-feedback { 
    display: none; 
} 
.form-group.has-success.has-feedback > .form-control-feedback.glyphicon-ok { 
    display: block; 
} 
.form-group.has-warning.has-feedback > .form-control-feedback.glyphicon-warning-sign { 
    display: block; 
} 
.form-group.has-error.has-feedback > .form-control-feedback.glyphicon-remove { 
    display: block; 
} 

您可能不得不随身携带一些HTML - 我不确定.icon是为了什么，我将它删除了。另外，不确定你的.help块的风格是什么。

无论如何，将（通过您的验证脚本）将类.has-warning，.has-error或.has-success添加到窗体组会显示相应的图标。