Adding dynamic bootstrap glyphicon in asp.net mvc form with unobtrusive validation
I have the following javascript which successfully puts the red border and green border as per loading
Please check lines with - (lines pertaining to this question)
(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);
}
The razor looks like this:
<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>
Screenshot
Question: How can I dynamically add glyphicons so that according to boostrapframework, when the field is valid it shows a green check, and when it is invalid it shows red crosses.
http://screencast.com/t/Oat8DvZnsy
And it should look like this: http://screencast.com/t/irp2fafnGx
source to share
Change HTML to
<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>
and add CSS like so
.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;
}
You may have to play around with the HTML a bit - I wasn't sure if the .icon was for that, and I removed it. Also, wasn't sure what your style for the .help block was.
What is happening anyway is that adding the classes .has-warning, .has-error or .has-success to the form group (via your validation script) shows the corresponding icon.
source to share