使用多个 'div' 的 jQuery 验证插件

Question

我正在使用一个很棒的 jQuery 验证插件。它在单个表单中运行良好，但如果我在该表单中使用 div，则它不起作用（至少它仅适用于第一个 div）。

我想要一个三列布局表单（左、中、右 div 列）。验证仅在左（第一）列中有效。如果我加入所有列，它会再次完美运行。它在第一个关闭 div 后停止工作...我想验证何时单击“提交”按钮。

<script type="text/javascript">
    $(document).ready(function() {
        // Validate signup form on keyup and submit
        var validator = $("#form").validate({
            rules: {
                name: {required: true,},
                age:  {required: true,},
                city: {required: true,}
            },
            messages: {
                name: {required: "required"},
                age:  {required: "required"},
                city: {required: "required"}
            },
        });
    });
</script>

<div class="left">
    <form id="form" class="form" action="REGISTER.PRO" method="post">
        <input id="name" name="name" value="" type="text" class="name"/>
        </div>
        <div class="center">
            <input id="age" name="age" value="" type="text" class="age"/>
        </div>
        <div class="right">
            <input id="city" name="city" value="" type="text" class="city"/>
            <button>Register</button>
    </form>
</div>

我该怎么做？

Answer 1

您有无效的标记（错误嵌套的 div）和无效的 JavaScript 代码（尾随逗号）。修复方法如下：

<form id="form">
    <div class="left">
        <input id="name" name="name" value="" type="text" class="name"/>
    </div>
    <div class="center">
        <input id="age" name="age" value="" type="text" class="age"/>
    </div>
    <div class="right">
        <input id="city" name="city" value="" type="text" class="city"/>
    </div>
    <button>Register</button>
</form>

JavaScript 代码：

$("#form").validate({
    rules: {
        name: {
            required: true
        },
        age: {
            required: true
        },
        city: {
            required: true
        }
    },
    messages: {
        name: {
            required: "required"
        },
        age: {
            required: "required"
        },
        city: {
            required: "required"
        }
    }
});

以及 现场演示。