如何根据选中的复选框验证表值

Question

以下是我的表结构：

<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701"  checked="">
</td>
<td class="">
<input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701">
</td>
<tr>
<tr>

<tr class="even">
<td class=" sorting_1">
<input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702"  checked="">
</td>
<td class="">
<input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154702">
</td>
<tr>
<tr>
.
.
.
and many more rows

在onblur 事件中，我正在调用一个javascript validate 函数，该函数在错误时将类设置为“无效”。

现在在提交表单之前，我调用了一个 javascript 方法，在该方法中检查类是否有错误并返回 false id 错误。

if ($("[id^=appName]").hasClass("invalid")) { 
            alert("Invalid Application name");
             return false;
        }

我面临的问题是验证所有表格行，无论是否通过复选框进行检查。我只需要验证通过复选框选中的那些行。

可以请一些建议我如何进行。

Answer 1

更新答案：我花了一段时间，但我可能已经得到了想要的结果。因此，如果您使用以下内容：

if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
        alert("Invalid Application name");
        return false;
}

仅当至少有一个类为 invalid 的元素且复选框在同一行上被选中时才会发出警报。

另外，我还要看一下表格，我注意到 tr 缺少一些结束标签（</tr>) 和 divs 在 td 内。抱歉指出这一点，但它可能对 HTML 验证有一些影响。

function validate() {

  var invalidRowCount = $(".invalid[id^=appName]").closest("tr").find("input:checked").length;


  console.log(invalidRowCount); //prints 2

  if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
    alert("Invalid Application name");
    return false;
  }
}

td div { display: inline }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr class="odd">
    <td class=" sorting_1">
      <input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701" checked="">
    </td>
    <td class="">
      <input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
      <div id="error1042154701">invalid</div>
    </td>
  </tr>
  <tr class="even">
    <td class=" sorting_1">
      <input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702" checked="">
    </td>
    <td class="">
      <input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
      <div id="error1042154702">invalid</div>
    </td>
  </tr>

  <tr class="odd">
    <td class=" sorting_1">
      <input id="clone1042154701new" class="fileCheckAll" type="checkbox" name="clone1042154701new" checked="">
    </td>
    <td class="">
      <input id="appName1042154701new" class="fileAppName" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
      <div id="error1042154701new">valid</div>
    </td>
  </tr>

</table>

<br>
<button onclick="validate()">Click me</button>

Answer 2

你可以使用：

$('#someId').filter(':checked');

即使用filter 方法。