我正在尝试在多选字段上设置一些验证规则。问题是,只有当我停用JQuery多选插件时,验证才有效。见小提琴。有没有办法使两者一起工作?
<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>