複数選択フィールドにいくつかの検証ルールを設定しようとしています。問題は、JQuery multiselect プラグインを非アクティブ化した場合にのみ検証が機能することです。フィドルを参照してください。2つを連携させる方法はありますか？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link href="http://wowislandcharter.com/roit/script/jquery/multiselect/multiselect.css"
type="text/css"
rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</head>
<body>
<form id="myform">
<select id="symptom" name="symptom" multiple="" size="15" >
<option value="1">Watery diarrhea</option><option value="2">Abdominal cramps</option><option value="3">Nausea</option><option value="4">Vomiting</option><option value="5">Diarrhea</option><option value="6">Fever</option><option value="7">Bloody Diarrhea</option><option value="8">Cramps</option><option value="9">Facial pallor</option><option value="10">Tea-colored urine</option><option value="11">Abdominal pain</option><option value="12">Jaundice</option><option value="13">Headache</option><option value="14">Stiff neck</option><option value="15">Weakness</option><option value="16">Confusion</option>
</select>
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://wowislandcharter.com/roit/script/jquery/multiselect/multiselect.js"></script>
<script>
$("#symptom").multiselect({
columns:2,
texts:{placeholder:"SELECT SYMPTOM"}
})
$( "#myform" ).validate({
rules: {
symptom: {
required: true,
}
}
});
</script>
</body>
</html>