Question

我在表单上有两个下拉列表。如果用户从第一个下拉列表中选择一个值，我想确保他们从第二个下拉列表中做出选择。我是淘汰赛的新手，所以我不知道该怎么做。我认为我不需要一个完整的验证库。我只想停止动作，这样弹出窗口就不会消失，有些文字显示“嘿，你选择一些东西！”

该行如下所示：

<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>

更新

这是我正在使用的功能。 Edge是一个模态窗口，显示在选择框的位置。

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

好的，这是一个完整的解决方案：

// 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);
    }

还记得在项目中添加淘汰赛验证。它是一个插件而不是作为淘汰赛的一部分装运出来的。

如果选择了另一个下拉列表，则验证是否选择了下拉列表

1 个答案: