0

我想将验证器插件与 Twitter Bootstrap 一起使用。但是，它目前并没有真正起作用，我现在不知道为什么。

我的表格：

<div class="form_errors"></div>
<div class="form_holder_invitee" id="form_holder_invitee">
    <form class="homepage_invitee_form" id="homepage_invitee_form" action="add"
    method="get">
        <input name="email" placeholder="Email Address" id="email_address_new"
        type="text placeholder">
        <br>
        <input name="firstName" placeholder="First Name" id="firstname_new" type="text placeholder">
        <input name="lastName" placeholder="Last Name" id="lastname_new" type="text placeholder">
        <br>
        <button type="submit" class="btn btn-primary opal_btn" id="submit_form_new"
        value="submit">Request Invitation</button>
    </form>
</div>

这是我的验证器脚本：

$(document).ready(function () {

    $('#form_holder_invitee').validate({
        rules: {
            firstName: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            lastName: {
                minlength: 2,
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form_errors')
                .removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.form_errors')
                .removeClass('error').addClass('success');
        }
    });

}); // end document.ready

还有一点 CSS 来显示错误：

label.error {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}

但是，当我输入表单时，什么也没有发生。这些库在我的 html 中正确配置。有任何想法吗？

4

1 回答 1

1

我认为这是因为您在包装器 div 而不是表单上注册了 .validate 函数？但我不知道验证器插件。

于 2013-03-29T18:51:13.057 回答