JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0beta.debug.js"></script>
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/v1.0/Src/knockout.validation.js"></script>
<label for="test" data-bind="validationLabel: testField">My Test Input</label>
<input type="text" id="test" value="" data-bind="value: testField" />
JavaScript
var vm = {
testField: ko.observable().extend({ required: true })
};
ko.bindingHandlers.validationLabel = {
update: function(element, valueAccessor){
var $el = $(element);
var obs = valueAccessor();
var label = $el.text(); // the label's text value
// register change subscriptions for these
var isValid = obs.isValid(), isModified = obs.isModified();
if(!isValid && isModified){
// add the asterisk to the label if it doesnt have one
label += (/\*/.test(label)) ? '' : '*';
}else{
label = label.replace(/\*/, '');
}
return ko.bindingHandlers.text.update(element, function() { return label; });
}
};
ko.applyBindingsWithValidation(vm);