Bootstrap表格内表单验证失效 求原因及保留表格的解决办法

在表格内使用Bootstrap表单验证功能（表单和提交按钮均位于表格内）时，验证失效；移除<table>标签后验证恢复正常，但表格结构被破坏。请问原因是什么，有没有保留表格的快速解决办法？

问题代码 #

JavaScript #

$(document).ready(function(){

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = $('.needs-validation')


  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    console.log(form);
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.classList.add('was-validated')
    }, false)
  })
})

HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<table class="table"> 
    <tbody>
        <tr>
            <td> ID:</td>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <form method="POST" action="#" class="needs-validation" novalidate>
                <td>Username:</td>
                <td>User</td>
                <td>
                    <input class="form-control" placeholder="New username" name="username" required>
                    <div class="invalid-feedback">
                        Please provide a username.
                    </div>
                </td>
                <td></td>
                <td><button class="btn btn-primary" type="submit">Confirm</button></td>
            </form>
        </tr>
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

核心问题是HTML结构不合法：根据HTML规范，<tr>标签的直接子元素只能是<td>或<th>，不能直接嵌套<form>。浏览器遇到非法结构时会自动修正DOM，将<form>移到<tr>外部，导致表单与内部的<input>、<button>元素失去关联。此时调用form.checkValidity()时，表单无法检测到这些输入框，自然触发不了验证逻辑。

方法1：将表单包裹整个表格（适合整表都是表单的场景） #

把<form>标签放在<table>外面，确保所有表单元素都在表单范围内，结构合法且验证生效：

<form method="POST" action="#" class="needs-validation" novalidate>
    <table class="table"> 
        <tbody>
            <tr>
                <td> ID:</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Username:</td>
                <td>User</td>
                <td>
                    <input class="form-control" placeholder="New username" name="username" required>
                    <div class="invalid-feedback">
                        Please provide a username.
                    </div>
                </td>
                <td></td>
                <td><button class="btn btn-primary" type="submit">Confirm</button></td>
            </tr>
        </tbody>
    </table>
</form>

方法2：将表单放在单个单元格内，用colspan合并列（适合仅单行是表单的场景） #

把<form>放在某个<td>中，通过colspan让这个单元格占据整行宽度，再在表单内用Bootstrap网格布局模拟原表格的列结构，既保持表格外观，又保证结构合法：

<table class="table"> 
    <tbody>
        <tr>
            <td> ID:</td>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="5">
                <form method="POST" action="#" class="needs-validation" novalidate>
                    <div class="row align-items-center">
                        <div class="col-auto">Username:</div>
                        <div class="col-auto">User</div>
                        <div class="col-auto">
                            <input class="form-control" placeholder="New username" name="username" required>
                            <div class="invalid-feedback">
                                Please provide a username.
                            </div>
                        </div>
                        <div class="col-auto"></div>
                        <div class="col-auto">
                            <button class="btn btn-primary" type="submit">Confirm</button>
                        </div>
                    </div>
                </form>
            </td>
        </tr>
    </tbody>
</table>

方法3：使用HTML5的form属性（灵活度最高） #

将表单放在表格外部，给表单设置唯一id，然后给表格内的<input>和<button>添加form属性，值为表单的id。这样元素和表单依然关联，验证正常，同时保持表格结构：

<form id="usernameForm" method="POST" action="#" class="needs-validation" novalidate></form>

<table class="table"> 
    <tbody>
        <tr>
            <td> ID:</td>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Username:</td>
            <td>User</td>
            <td>
                <input class="form-control" placeholder="New username" name="username" required form="usernameForm">
                <div class="invalid-feedback">
                    Please provide a username.
                </div>
            </td>
            <td></td>
            <td><button class="btn btn-primary" type="submit" form="usernameForm">Confirm</button></td>
        </tr>
    </tbody>
</table>

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