JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<fieldset class="create-fieldset complaint">
<legend>Job Tasks</legend>
<p class="form-group">
<label for="TaskDescriptions">
Task Description:<em>*</em></label>
<textarea id="TaskDescriptions" name="TaskDescriptions" data-bind="value: task().description"></textarea>
</p>
<p class="form-group">
<label for="TaskPriority">
Task Priority:<em>*</em><span class="priority-info"></span></label>
<input type="text" id="TaskPriority" class="narrow-text" name="TaskPriority" data-bind="value: task().priority" />
</p>
<p class="form-group">
<label for="TaskComplete">
Task Complete:</label>
<input style="vertical-align: top;" name="TaskComplete" id="TaskComplete" type="checkbox"
data-bind="checked: task().complete" />
<button class="create-button" data-bind="click: addTask">
Add</button>
</p>
</fieldset>
CSS
.input-validation-error {
background-color: red;
}
JavaScript
ko.validation.configure({
decorateElement: true,
insertMessages: false,
errorElementClass: 'input-validation-error'
});
function JobTask() {
var self = this;
self.description = ko.observable('').extend({
required: true
});
self.priority = ko.observable('').extend({
number: true,
required: true
});
self.complete = ko.observable(false);
}
function CreateJobViewModel() {
var self = this;
self.task = ko.observable(new JobTask());
self.taskErrors = ko.validation.group(self.task);
self.addTask = function() {
if (self.taskErrors().length) {
console.log(self.taskErrors());
self.taskErrors.showAllMessages();
}
else {
}
};
}
ko.applyBindings(new CreateJobViewModel());