title: Adding bootstraph glyphicon dynamically in asp.net mvc form with unobtrusive validation
body: <p>I have the following javascript which successfully puts the red border and green border according to bootstrap </p>
  
  <p>Please check the lines with - (the lines relevant for this question)</p>
  
  <pre><code>(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);
  </code></pre>
  
  <p>}</p>
  
  <p>The razor view its like this:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
  
              @Html.LabelFor(model =&gt; model.FechaHasta, new { @class = "col-sm-2 control-label" })
              &lt;div class="col-sm-10"&gt;
                  @Html.EditorFor(model =&gt; model.FechaHasta, new { htmlAttributes = new { @class = "form-control" } })
                  &lt;span class="icon" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;div class="help-block"&gt;
                      @Html.ValidationMessageFor(model =&gt; model.FechaHasta)
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>Screenshot</p>
  
  <p>Question: how can I dinamically add the glyphicons so that according to the boostrapframework when a field is valid it shows the green check and when its invalid it shows the red crosss.</p>
  
  <p><a href="http://screencast.com/t/Oat8DvZnsy" rel="nofollow">http://screencast.com/t/Oat8DvZnsy</a></p>
  
  <p>And it should show like this:
  <a href="http://screencast.com/t/irp2fafnGx" rel="nofollow">http://screencast.com/t/irp2fafnGx</a></p>
  
  <p><a href="http://getbootstrap.com/css/#forms" rel="nofollow">http://getbootstrap.com/css/#forms</a></p>