ko-Validation. "onlyIf" for collections

by Ilia Tretiakov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.2/knockout.validation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<!-- ko foreach: arr -->
<input data-bind="textInput: val1" />
<br/>
<input data-bind="textInput: val2" />
<br/>
<br/>
<!-- /ko -->
<br/><br/>
<button id="saveButton">Save</button>

CSS

.errorElementClass{color: red;}

JavaScript

ko.validation.init({
    decorateInputElement: true
});

var viewModel = ko.validatedObservable(
    {
        arr: ko.observableArray([])
    },
    {deep: true, live: true}
);

ko.applyBindings(viewModel);

ko.mapping.fromJS(
    [
        {val1: '', val2: ''},
        {val1: '', val2: ''}
    ],
    {
        val1: {
            create: function (options) {
                return ko.observable(options.data)
                    .extend({
                            required: {
                                onlyIf: function (){
                                    var result = !!ko.unwrap(options.parent.val2);
                                    
                                    return result;
                                }
                            }
                        });
                }
        }
    },
    viewModel().arr
);

$("#saveButton").on('click', function(){
    viewModel.errors.showAllMessages();
});