Question

I am using Twitter’s Bootstrap as my framework for a project I am working on. I am attempting to validate a simple contact form using the jQuery Validate plugin but it’s causing some headaches.

I’m looking to add an Error or Valid class to the parent div of each form’s input. Here’s my form code:

 <form id="msg-form" class="">
    <fieldset>
        <div class="input-prepend control-group pull-left">
            <span class="add-on">@</span>
            <input class="span3 required email" id="inputEmail" name="msg-email" type="text" placeholder="[e-mail]">
        </div>
        <div class="input-prepend control-group pull-left">
            <span class="add-on"><i class="icon-user"></i></span>
            <input class="span3 required" id="inputName" name="msg-name" type="text" placeholder="Joe Bloggs">
        </div>
        <div class="input-prepend control-group">
            <span class="add-on" style="height: 53px;"><i class="icon-pencil"></i></span>
            <textarea class="span3 required" id="textarea" name="msg-comments" rows="2" style="height: 53px" placeholder="Just say hi, or tell us how we can help"></textarea>
        </div>
        <button type="submit" class="btn pull-right">Submit<i class="icon-chevron-right"></i></button>
    </fieldset>
</form> 

As you can see my div.control-group is the div I want to add the class to. I have attempted to use the highlight (as suggested here, but this simply didn’t work) & errorPlacement (see below) but I’m not doing it correctly.

Ideally I want the class to be added/removed on keyup so it keeps the great functionality that the plugin offers. This simple code works, but it does not remove the class & only works on submission of the form:

$("#msg-form").validate({
    errorPlacement: function(error, element) {
        $(element).parent('div').addClass('error');
    }
});

Can anyone suggest what option I should be using to achieve this?!

Thanks in advance – I can provide any additional details in necessary!

Answer 1

Try using the highlight and unhighlight functions:

$("#msg-form").validate({
    highlight: function(element) {
        $(element).parent('div').addClass('error');
    },
    unhighlight: function(element) {
        $(element).parent('div').removeClass('error');
    }
});