添加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添加到窗體組會顯示相應的圖標。