表格重复行内表单元素逐行顺序验证实现求助

你的需求很明确：点击提交按钮时，按行依次完成整行的所有输入验证——先验证第一行的.abc→.def→.ghi，全部通过后再验证第二行的三个输入，以此类推；如果某行的某个输入为空，就停在该行提示错误，而不是跳去检查其他行的同类型输入。

原代码的问题 #

你当前的jQuery逻辑有两个关键问题：

1. 虽然是遍历每行，但在每行的验证逻辑里，只要当前行所有输入都通过，就立即调用$(".sbmt").submit()，这会导致遍历完一行就提交一次，显然不符合预期
2. 错误提示依赖的DOM元素#err需要确保存在，否则会直接报错

修正后的代码 #

首先确保页面上有错误提示的元素，我已经在表单里补充了这个元素：

<form method="post">
  <div id="err" style="color:red;"></div>
  <table width="100%" class="tableclass">
    <tr>
      <td><input type="text" class="abc" /></td>
      <td><input type="text" class="def" /></td>
      <td><input type="text" class="ghi" /></td>
    </tr>
    <tr>
      <td><input type="text" class="abc" /></td>
      <td><input type="text" class="def" /></td>
      <td><input type="text" class="ghi" /></td>
    </tr>
    <tr>
      <td><input type="text" class="abc" /></td>
      <td><input type="text" class="def" /></td>
      <td><input type="text" class="ghi" /></td>
    </tr>
  </table>
  <input type="submit" class="sbmt" value="submit" />
</form>

然后是修正后的jQuery验证逻辑：

$(function () {
  $(".sbmt").click(function (e) {
    // 先阻止按钮的默认提交行为，优先完成验证
    e.preventDefault();
    // 清空之前的错误提示
    $("#err").html("");
    // 标记整体验证状态
    let isValid = true;

    $(".tableclass tr").each(function () {
      const $currentRow = $(this);
      // 按顺序验证当前行的每个输入框
      if ($currentRow.find(".abc").val().trim() === '') {
        $("#err").html("第一列输入不能为空");
        isValid = false;
        // 终止遍历，不再检查后续行
        return false;
      }
      if ($currentRow.find(".def").val().trim() === '') {
        $("#err").html("第二列输入不能为空");
        isValid = false;
        return false;
      }
      if ($currentRow.find(".ghi").val().trim() === '') {
        $("#err").html("第三列输入不能为空");
        isValid = false;
        return false;
      }
    });

    // 只有所有行都验证通过，才提交表单
    if (isValid) {
      $(this).closest("form").submit();
    }
  });
});

关键逻辑说明 #

1. 拦截默认提交：用e.preventDefault()先按住按钮的提交动作，确保验证完成后再决定是否提交
2. 逐行逐元素验证：遍历每一行时，严格按照.abc→.def→.ghi的顺序检查，一旦发现空值就提示错误、标记验证失败，并终止each循环，完全符合你“整行验证完再下一行”的需求
3. 统一提交时机：只有当所有行都验证通过（isValid为true）时，才调用表单的submit()方法，避免多次提交的问题
4. 空值判断优化：用trim()去掉输入的首尾空格，避免用户输入空格被误判为有效内容

内容的提问来源于stack exchange，提问作者user3450590