Question

我正在使用一个很棒的jQuery validation plugin。它适用于单个表单，但是如果我在这个表单中使用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"
        }
    }
});

和live demo。

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

1 个答案: