Knockout.js validation on observableArray requires all items (no null fields)
Maceika
I wrote the following example using knockout.
HTML
<script id="customMessageTemplate" type="text/html">
<em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<fieldset>
<legend>User: <span data-bind='text: errors().length'></span> errors</legend>
<label>First name: <input data-bind='value: firstName'/></label>
<label>Last name: <input data-bind='value: lastName'/></label>
<table>
<thead>
<tr><th>Value</th></tr>
</thead>
<tbody data-bind="foreach: captcha">
<tr>
<td><input data-bind="value: value" type="test" /></td>
</tr>
</tbody>
</table>
<button type="button" data-bind='click: submit'>Submit</button>
knock out
ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.configure({
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null
});
var captcha = function (val) {
return val == 11;
};
var mustEqual = function (val, other) {
return val == other();
};
var viewModel = {
firstName: ko.observable().extend({ required: true }),
lastName: ko.observable().extend({ required: true }),
captcha: ko.observableArray([{value: "test"}]),
submit: function () {
if (viewModel.errors().length == 0) {
alert('Thank you.');
} else {
alert('Please check your submission.');
viewModel.errors.showAllMessages();
}
}
};
viewModel.errors = ko.validation.group(viewModel);
ko.applyBindings(viewModel);
What should I add to the observableArray to require all items in this array, like the usual observable objects refer to the input fields FirstName and LastName in the presented example?
you
I'm not sure if this is what you expect. If you want to add validation for each object of an observableArrayyou can do the following:
Create a captchaViewModelfunction and add validation requiredto the valueproperty
var captchaViewModel = function(val) {
this.value = ko.observable(val).extend({
required: true
});
// other properties if any
}
Then change yours viewModelto:
var viewModel = {
firstName: ko.observable().extend({ required: true }),
lastName: ko.observable().extend({ required: true }),
captcha: ko.observableArray([new captchaViewModel("test")]),
submit: function() {
if (viewModel.errors().length == 0) {
alert('Thank you.');
} else {
alert('Please check your submission.');
viewModel.errors.showAllMessages();
}
}
};
You also need to add properties and set them groupingin the configuration .deep: true
ko.validation.configure({
.......
.......
// "deep" indicates whether to walk the ViewModel (or object) recursively,
// or only walk first-level properties
grouping: { deep: true }
});