Question

我的代码：

<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验证

Answer 1

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

这正是验证插件无效的原因。

以下两个示例中的所有代码都是相同的，但<form>代码的位置除外。

案例1：＆lt;被无效的HTML破解

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

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

DEMO ：http://jsfiddle.net/NVHgZ/

案例2：＆lt;这是您的解决方案

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

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

DEMO ：http://jsfiddle.net/PXbjN/

由于您希望在一个<table>中包含多个表单，因此您必须通过嵌套 table内的另一个table来遵循有效HTML的正确约定}}。顺便说一句，“桌面布局”已成为过去。现代设计使用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>

Jquery验证：'一个表行一个表'不起作用

1 个答案: