CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-validate
maximus
maximus

Reputation: 11524

JQuery - validator plugin

I want to use the validator plugin together with Twitter Bootstrap. However, it does not really work at the moment and I do not now why.

My form:

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

This is my 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

And a little bit of CSS to show the error:

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

However, when I type into the form, nothing happens. The libraries are properly configured in my html. Any ideas?

Upvotes: 0

Views: 840

Answers (1)

roman
roman

Reputation: 919

i think it's because you've registered the .validate function on your wrapper div instead of your form? but i don't know the validator plugin.

Upvotes: 1

Related Questions