HTML 5 验证在带有 Knockout 选项绑定的 Firefox 中不起作用答案

【问题标题】：HTML 5 validation not working in Firefox with Knockout options bindingHTML 5 验证在带有 Knockout 选项绑定的 Firefox 中不起作用
【发布时间】：2015-01-16 07:25:21
【问题描述】：

我试图强制用户在由 Knockout 填充的下拉菜单中选择一个选项。我正在使用 HTML5“必需”验证属性，它在 Chrome 38 和 Opera 25 中运行良好，但在 Firefox 33 中失败。

这是我的 HTML：

<form id="theForm" class="form-horizontal form-validate" action="" method="post">
    <div class="control-group">
        <label class="control-label">To</label>
        <div class="controls">
            <select required data-bind="options: listRecipients,
                                    optionsCaption: 'Choose...', 
                                   optionsText: 'name',
                                   value: selectedRecipient"></select>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit Changes</button>
</form>

以及对应的JavaScript：

$(document).ready(function () {
    function AppViewModel() {
        // KO model
        self.listRecipients = ko.observableArray([{
            name: 'foo',
            id: '1'
        }, {
            name: 'bar',
            id: '2'
        }]);
        self.selectedRecipient = ko.observable();
    }

    // Activates knockout.js
    var appViewModel = new AppViewModel();
    ko.applyBindings(appViewModel);
});

对应jsFiddle。

使用带有 Knockout“选项”的 jQuery 验证似乎相当复杂，而且我也找不到很多关于使用带有“选项”的敲除验证的文档......知道为什么它在 FF 中不起作用吗？

【问题讨论】：

标签： html validation firefox knockout.js

【解决方案1】：

Knockout sports databind optionsValue 所以如果它是 id 你想存储在 observable selectedRecipient 中，只需添加 optionsValue:'id'

<form id="theForm" class="form-horizontal form-validate" action="" method="post">
    <div class="control-group">
        <label class="control-label">To</label>
        <div class="controls">
            <select required data-bind="options: listRecipients,
                                    optionsCaption: 'Choose...', 
                                   optionsValue: 'id',   
                                   optionsText: 'name',
                                   value: selectedRecipient"></select>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit Changes</button>
</form>

对应jsFiddle.

【讨论】：