JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="https://rawgithub.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<form id="employeeForm" name="employeeForm" method="POST">
<script id="PhoneTemplate" type="text/html">
<div>
<div>
<label>Country Code:</label>
<input type="text" id="txtCountryCode" data-bind="value:Code" />
</div>
<div><br/>
<label>Date:</label>
<input type="text" data-bind="value: Date" />
</div>
<div>
<label>Phone Number:</label>
<input type="text" class="txtPhoneNumber" data-bind="value:PhoneNumber" />
</div>
<input type="button" id="btnRemove"
value="Remove" data-bind="click: $parent.remove" />
</div>
</script>
<div>
<h2>Employee Information</h2>
<div data-bind="template:{name:'PhoneTemplate', foreach:PhoneList}">
</div>
<div>
<input type="button" id="btnAdd"
value="Add Another" data-bind="click: add" />
<input type="submit" data-bind="click: save" />
</div>
</div>
</form>
CSS
.validationMessage{
color: red;
}
JavaScript
function Phone() {
var self = this;
self.Code = ko.observable("");
self.Date = ko.observable("");
self.PhoneNumber = ko.observable("");
self.Validation = ko.validatedObservable([
self.Code.extend({ required: true }),
self.Date.extend({ required: true }),
self.PhoneNumber.extend({ required: true })
]);
}
function PhoneViewModel() {
var self = this;
self.PhoneList = ko.observableArray([new Phone()]);
self.remove = function () {
self.PhoneList.remove(this);
};
self.add = function () {
self.PhoneList.push(new Phone());
};
self.save = function () {
var errors = 0;
ko.utils.arrayForEach(self.PhoneList(), function (item) {
if (item.Validation.errors().length != 0) {
item.Validation.errors.showAllMessages();
errors++;
}
});
if(errors) {
alert("has employee errors");
}
else {
alert("all good");
}
}
}
ko.applyBindings(new PhoneViewModel());
$(document).ready(function () {
});