2

我的代码：

<table>
    <form id='editform1'>
    <tr>
        <td><input type.../> </td>
        <td><input type.../> </td>
        <td><input type='submit'/> </td>
    </tr>
    <script type="text/javascript"> $('#editform1').validate(); </script>
    </form>

    <form id='editform2'>
    <tr>
        <td><input type.../> </td>
        <td><input type.../> </td>
        <td><input type='submit'/> </td>
    </tr>
     <script type="text/javascript"> $('#editform2').validate(); </script>
    </form>

    <form id='editform3'>
    <tr>
        <td><input type.../> </td>
        <td><input type.../> </td>
        <td><input type='submit'/> </td>
    </tr>
     <script type="text/javascript"> $('#editform3').validate(); </script>
    </form>
</table>

所以当我点击提交按钮时，相关的行数据将成功传递到后台

但是 jquery 验证不起作用！

虽然'form'标签不能放在'tr'标签上，但是在Fixfox和chrome中，数据可以提交成功

那么如何使 jquery 验证在这种情况下有效

4

1 回答 1

3

如前所述，您的 HTML 无效。只有某些标签，例如<tr>，才允许作为 的直接后代<table>。

这正是验证插件不起作用的原因。

下面两个示例中的所有代码都是相同的，除了<form>标记的位置。

案例 1：< 被无效的 HTML 破坏

无效的 HTML。即使有空字段，表单也始终通过验证。

<table>
    <form>
    ...
    </form>
</table>

演示：http: //jsfiddle.net/NVHgZ/

案例2：<这一个是你的解决方案

有效的 HTML。验证插件按预期工作。

<form>
    <table>    
    ...    
    </table>
</form>

演示：http: //jsfiddle.net/PXbjN/

由于您希望在一个中包含多个表单<table>，因此您必须通过在table您的table. 顺便说一句，“表格布局”已成为过去。现代设计使用 CSS 和容器之类div的元素来进行精确的内容布局。

<table>
    <tr>
        <td>

            <form id="one">
                <table>
                ....
                </table>
            </form>

        </td>
    </tr>
    <tr>
        <td>

            <form id="two">
                <table>
                ....
                </table>
            </form>

        </td>
    </tr>
    <tr>
        <td>

            <form id="three">
                <table>
                ....
                </table>
            </form>

        </td>
    </tr>
</table>
于 2013-09-09T15:46:29.167 回答