У меня есть форма, которая добавляет класс ошибки в родительский div для набора флажков, используя плагин jQuery Validate. Однако, когда флажок установлен, класс ошибок удаляется, но стиль CSS остается. Есть идеи, что я делаю не так?
Пример: http://jsfiddle.net/qK3SC/
HTML:
<form name="itemForm" id="itemForm" method="post">
<div id="boxes">
<input type="checkbox" id="check1" class="require-one" value="1" /> Item #1
<input type="checkbox" id="check2" class="require-one" value="2" /> Item #2
</div>
<div id="freetext">
<input type="text" class="required" />
</div>
<input type="submit" />
</form>
Javascript:
$.validator.addMethod('require-one', function(value) {
return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');
var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
return $(e).attr("name")
}).join(" ");
$("#itemForm").validate({
groups: {
checks: checkbox_names
},
errorPlacement: function(error, element) {
if (element.is(':checkbox')) {
$(element).parent('div').addClass('checkbox-error');
}
return true;
}
});
UPDATE:
Мне удалось использовать методы highlight / unhighlight, чтобы заставить класс ошибок работать для флажков, но теперь класс ошибок для других моих элементов не работает (т. Е. Ввод текста и выпадающие списки). Смотри: http://jsfiddle.net/qK3SC/7/