Introduction
Here is a simple implementation of dynamically toggle .has-error bootstrap css class, when input (or .form-control) value changes.Knockout + Bootstrap + jQuery
Using these 3 JavaScript libraries make things easier. We will bind change event with Knockout, find the right DOM element with jQuery and finally apply to (or remove from) it the .has-error css class.The code
HTML code :<input type="email" class="form-control" placeholder="Enter your email" required data-bind="event: { change: validate }" />or
<fieldset class="form-group">
<label class="control-label" for="Email">Email address</label>
<input id="Email" class="form-control" type="email" placeholder="Enter your email" required data-bind="event: { change: validate, invalid: validate }" />
</fieldset>JavaScript code :
ko.applyBindings({
validate: function(viewModel, event) {
var element = event.target || event.srcElement;
$(element).parent().toggleClass("has-error", !element.validity.valid);
}
});Displaying error comment
Append a span.help-block after the .form-control element :
We need an error message object that looks like this :
<fieldset class="form-group">
<label class="control-label" for="Email">Email address</label>
<input id="Email" class="form-control" type="email" placeholder="Enter your email" required data-bind="event: { change: validate }" />
<span class="help-block"></span>
</fieldset>We need an error message object that looks like this :
var validation = {
errors: {
default: "Invalid value",
valueMissing: "Required field"
}
}The binding model becomes :
ko.applyBindings({
validate: function(viewModel, event) {
var element = event.target || event.srcElement;
for (var k in element.validity) {
if (k != "valid" && element.validity[k]) {
message = validation.errors[k] || validation.errors["default"];
}
}
$(element).parent().toggleClass("has-error", !element.validity.valid)
.children(".help-block").text(message);
}
});