Knockout JS：验证表格内的下拉列表

Question

在这里使用 Knockout JS。

当前设置：

我有一个 HTML 表格，表格有 5 列。我有按钮向表中添加一行，然后删除每一行的按钮以将其删除。我在该表的 2 列中也有一个下拉列表。第一个下拉列表由表格外的按钮单击事件填充。即，当您按下获取数据按钮时，它会填充下拉列表。此外，当您选择任何 dropdpwns 时，行数据会随着选择进行调整。 最后还有一个保存按钮。点击后我想保存所有数据。

我的下拉菜单如下：

  <td><select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--'"> </select></td>

  <td>
    <select class="form-control" data-bind="value: selectedSeparator">
       <option value="">--Select--</option>
       <option value="#">#</option>
       <option value="@">@</option>          
     </select>
  </td>

问题：

我的问题是关于验证。由于我在客户端单击添加了每一行，从而动态添加了这些下拉列表，我如何对下拉列表进行验证 这样当用户点击保存按钮时，如果任何行没有选择下拉菜单，它会突出显示该行并引发错误。

我的 jsfiddle 设置如下：

https://jsfiddle.net/aman1981/7wqvr854/2/

--------已更新---------

我现在已经更新了我的 jsfiddle。现在每个下拉菜单都有一个不同的 ID。请参阅更新的小提琴：

https://jsfiddle.net/aman1981/7wqvr854/51/

现在的 HTML 如下：

<select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--',  attr: { name: 'Items[' + $index() + '].Name', id: 'Items[' + $index() + '].Name'}" name="Items[0].Name" id="Items[0].Name"><option value="">--Select--</option><option value="">Alex</option><option value="">Sam</option> </select>

您可以在其中看到 ID 和名称：“Items[0].Name” 我还在我的 TD 中添加了 ID 作为 tdName

当我使用以下代码时，现在点击按钮：

  var selectList = $('#tdName > select');
        for (var selectName of selectList) {
          //Here I can see my dropdown but how to check dropdown selected text/value here
        }

上面的代码是否有可能我可以遍历所有下拉菜单并查看是否被选中

谢谢

Answer 1

您可以使用基于条件的 CSS 类来标记无效行。

HTML：

<tr data-bind="css: { invalidRow: isInvalid }">

CSS：

.invalidRow {
  background-color: #ffb8b5;
}

Javascript：

self.Save = function(){
    for (i in self.items()) {
    if (typeof self.items()[i].selectedValue() == "undefined") {
      self.items()[i].isInvalid(true);
      alert("Select all dropdown")
    }
  }
};