javascript - knockout JS : Validation of Dropdowns inside the table

Question

在这里使用 Knockout JS。

当前设置:

我有一个 HTML 表格，该表格有 5 列。我有按钮向表中添加一行，然后删除每行的按钮以将其删除。我在该表的两列中也有一个下拉菜单。第一个下拉列表由表格外的按钮单击事件填充。即当您按下获取数据按钮时，它会填充下拉列表。此外，当您选择任何 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。请参阅更新的 fiddle :

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”我还将 ID 添加到我的 TD 作为 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")
    }
  }
};