JQuery - 验证器插件

时间:2013-03-29 18:43:23

标签: jquery twitter-bootstrap jquery-validate

我想将验证器插件与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>

这是我的validatorScript:

$(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中正确配置。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

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