如何将JQuery验证与JQuery multiselect插件一起使用

时间:2018-07-22 06:39:53

标签: javascript jquery jquery-validate jquery-ui-multiselect

我正在尝试在多选字段上设置一些验证规则。问题是,只有当我停用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>

0 个答案:

没有答案