simple task
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
<form data-bind="submit: send">
<div>
<label>Name</label>
<input type="text" data-bind="value: data.name"/>
</div>
<div>
<label>Tel</label>
<input type="text" data-bind="value: data.tel"/>
</div>
<div>
<label>Message</label>
<textarea data-bind="value: data.message"></textarea>
</div>
<div>
<input type="submit" data-bind="attr: {disabled: !!errors().length}"/>
</div>
</form>
CSS
div { margin: 0 0 .5em 0; display: flex; }
div label { width: 7em; }
input[type="text"], textarea { width: 20em; }
.validationMessage { padding: 0 .5em; color: red; }
JavaScript
const data =
{
name: ko.observable('Vasya')
.extend({ required: true, minLenght: 5 }),
tel: ko.observable(2128506)
.extend({ required: true, number: true }),
message: ko.observable('Hello')
.extend({ required: true }),
};
const vm =
{
data,
send()
{
$.post('/echo/json', ko.toJS(vm.data))
.then(() =>
{
window.alert('Okay');
vm.reset();
})
},
reset()
{
this.data.name('');
this.data.tel('');
this.data.message('');
},
errors: ko.validation.group(data)
}
ko.applyBindings(vm, $('form')[0]);