Validate that a dropdown is selected if another dropdown is selected - validation

Question

I have two dropdowns on an form. If the user selects a value from the first dropdown, I want to make sure they make a choice from the second dropdown. I'm new to knockout, so I'm not sure how to do this. I don't think I need a fullblown validation library. I just want to stop the action so the popup doesn't go away and some text appears saying "hey you, pick something!"
The row looks like this:
<div class="channelRow" data-bind="foreach: channels">
<div class="channelPrompt">CHANNEL: </div>
<select class="channelSelect" name="channels" data-bind="options: $root.financialVM.channelOptions(), value: name, optionsCaption: '--'"></select>
<div class="portPrompt">NUMBER OF PORTS: </div>
<select class="portSelect" name="ports" data-bind="options: $root.financialVM.portOptions(), value: port, optionsCaption: '--'"></select>
</div>
Update:
Here's the function that I'm working with. Edge is a modal window that appears and is where the select boxes are.
function Edge (siteA, siteB, key, channelpair) {
var edge = this;
edge.siteA = ko.observable(siteA);
edge.siteB = ko.observable(siteB);
edge.distance = ko.observable(0);
edge.key = ko.observable(key);
edge.channels = ko.observableArray([
new ChannelPair()
]);
edge.addChannel = function () {
if(edge.channels().length >= 3) return;
edge.channels.push(new ChannelPair());
};
}
function ChannelPair () {
var channel = this;
channel.name = ko.observable();
channel.port = ko.observable(0);
channel.port.extend({
required: {
message: "You can not have a name without a port",
onlyIf: function () { return (self.name() != null); }
}
});
}

Answer 1

Ok here is a complete solution for you:
// You need this config in order to kick things off
ko.validation.configure({
messagesOnModified: true,
insertMessages: true
});
function Edge (siteA, siteB, key, channelpair) {
var edge = this;
edge.siteA = ko.observable(siteA);
edge.siteB = ko.observable(siteB);
edge.distance = ko.observable(0);
edge.key = ko.observable(key);
edge.channels = ko.observableArray([
new ChannelPair()
]);
edge.addChannel = function () {
if(edge.channels().length >= 3) return;
edge.channels.push(new ChannelPair());
};
}
function ChannelPair () {
var channel = this;
channel.name = ko.observable();
// Extending happens on declaration not after wards
channel.port = ko.observable(0).extend({
required: {
message: "You can not have a name without a port",
// self doesn't mean anything here so replace it with channel like this
onlyIf: function () { return (channel.name() != null); }
}
});
// you need a property called errors to keep your validation group in it
channel.errors = ko.validation.group(channel);
}
Also remember to add knockout validation to your project. Its a plugin and not shipped as part of knockout out of the box.