Ticket #4293 (closed bug: invalid)
[validate] unhighlight callback unnecessary execution for checkbox fields
| Reported by: | supjogi | Owned by: | joern |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.4 |
| Component: | plugin | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
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());
}
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.