Ошибка в раскрывающемся поле не исчезает после первого выбора в Chrome и IE

У меня есть форма PHP с различными типами полей ввода, в которых я использовал обязательные поля плагина проверки jQuery. В Firefox все работает хорошо, то есть если пользователь не заполнил обязательное поле, он получит ошибку рядом с каждым полем, и как только он вставит данные в это поле, ошибка исчезнет.

Проблема: Протестируйте мою форму в Chrome и IE: если я не заполню обязательное поле и попытаюсь отправить запрос, я получу сообщение об ошибке (до этого момента все в порядке), но при выборе одного элемента в раскрывающемся списке ошибка НЕ ​​исчезнет пока я не выберу другой элемент или не щелкну где-нибудь в форме!

Это часть моего кода:

<script>
$(document).ready(function() {
$('#formId').validate({ // initialize the plugin
rules: {
q1: {
required: true,
},
q2: {
required: true,
},
"q5[]": {
required: true,
},
"q6[]": {
required: true,
}
},

errorPlacement: function(error, element) {
if (element.attr("type") == "radio" || element.attr("type") == "checkbox" || element.attr("name") == "q5[]") {
error.insertAfter($(element).parents('div').prev($('question')));

} else {
error.insertAfter(element);
}
}

});
});
</script>

и вот HTML для выпадающей части:

<select name="q5[]" multiple="multiple" width="200px" size="10px">
<?php

require 'vendor/autoload.php';

$gi = geoip_open('/usr/local/share/GeoIP/GeoIP.dat', GEOIP_STANDARD);
$ip = $_SERVER['REMOTE_ADDR'];
$preselect_country = geoip_country_name_by_addr($gi, $ip);
include('newCountry.php');
$list_top = "<option>--------------------Leave blank--------------------</option>\n";
$list_bottom = "";

while ($line = mysql_fetch_array($result)) {
if($preselect_country == $line['country']){
$list_top .= "<option value=\"{$line['country']}\">{$line['country']}</option>\n";
}else{
$list_bottom .= "<option value=\"{$line['country']}\">{$line['country']}   </option>\n";
}
}
echo $list_top . $list_bottom;

geoip_close($gi);

?>
</select>