JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://cdn.rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.min.js"></script>
<form action="/Questionnaire/Save" method="post">
<table id="ESAS-questions">
<tbody data-bind="foreach: ques">
<tr class="esas-question-row">
<td class="esas-best-area">
<div class="esas-best-symptom" data-bind="text: question"></div>
</td>
<td class="esas-score-area" data-bind="validationOptions: { insertMessages: false }"> <span class="esas-score">0<input type="radio" name="question_id-1" value="0" data-bind="checked: checkScore"/></span>
<span class="esas-score">1<input type="radio" name="question_id-1" value="1" data-bind="checked: checkScore"/></span>
<span class="esas-score">2<input type="radio" name="question_id-1" value="2" data-bind="checked: checkScore"/></span>
<p class="invalid" data-bind="validationMessage: checkScore"></p>
</td>
<td class="esas-worst-area">
<p class="esas-worst-symptom" data-bind="text: description"></p>
</td>
</tr>
</tbody>
</table>
<p>
<input type="submit" value="Submit" class="finish" data-bind="click:submit" />
</p>
</form>
CSS
.invalid {
color:red;
}
.invalidElement {
color:red;
}
.validationMessage {
color:red;
}
.validationElement {
color:red;
}
JavaScript
var qList = [{
question: "No Pain",
checkScore: ko.observable().extend({
required: true
}),
description: "Worst Possible Pain"
}, {
question: "No Tiredness (Tiredness = lack of energy)",
checkScore: ko.observable().extend({
required: true
}),
description: "Worst Possible Tiredness"
}];
//ko.validation.init( { grouping: { deep: true } } )
$(function () {
var viewModelQuestionnaire = {
ques: ko.observableArray(qList),
submit: function () {
if (this.errors().length<1) {
alert('Thank you.');
} else {
console.log(this);
alert('Please check your submission.');
this.errors.showAllMessages();
}
}
};
viewModelQuestionnaire.errors = ko.validation.group(viewModelQuestionnaire.ques(), {deep: true} );
ko.applyBindings(viewModelQuestionnaire);
});