There is problem when you have registered unhighlight callback and validate checkbox fields.

For example for below code when you click "Check" it show error and add error class in highligh function, but when you click on "Blue" checkbox - error class is removed (unhighlight is executed) but error still exists.

<script>

$(document).ready(function(){

$("#colorForm").validate({

highlight: function(element){

$(element).parent("td").next("td").addClass("myerror");

},

unhighlight: function(element){

$(element).parent("td").next("td").removeClass("myerror");

},

errorPlacement: function(error, element){

error.appendTo(element.parent("td").next("td"));

},

rules: {

color: {

required: true,

minlength: 2

}

},

messages: {

color: {

required: "Please select at least two colors"

}

}

});

});

</script>

<style>

.myerror {

color: red;

}

</style>

<form id="colorForm">

<table>

<tr>

<td>

<input type="checkbox" name="color" value="1"/>Black <input type="checkbox" name="color" value="2"/> White <input type="checkbox" name="color" value="3"/> Blue<input type="submit" value="Check"/>

</td>

<td>

</td>

</tr>

</table>

</form>

Solution:

I have modify function in this plugin to look like below, because there are problem that validated field exists also in validElements and invalidElements because "not" function compare checkbox array with single checkbox and they aren't equal.

validElements: function() {

var that = this;

return this.currentElements.map(function()

{

return that.findByName(this.name)[0]

}).not(this.invalidElements());

}