JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="form-group">
<label for="codes" class="control-label">Codes:</label>
<select id="codes" name="codes" class="form-control required">
<option value="code1">Code 1</option>
<option value="code2">Code 2</option>
</select>
</div>
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="my_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel">Value Set Names</h4>
</div>
<div class="modal-body">
<div class="checkbox-inline">
<label for="new-code">Please Select Value Set Names</label>
<input type="checkbox" name="valueSets[]" value="1" />Problems
<br>
<input type="checkbox" name="valueSets[]" value="2" />Medications
<br>
<input type="checkbox" name="valueSets[]" value="3" />Information
</div>
</div>
<div class="modal-footer">
<button id="btn_cancel_valuesetname" type="button" class="btn btn-default" style="margin: 0 10px 0 0;" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="submit" value="submit" type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
JavaScript
$('#codes').change(function () {
$('#my-modal').modal('show');
$('#submit').click(function (e) {
$("#my_form").validate({
rules: {
'valueSets[]': {
alert("Hellooo");
}
}
});
});
});