如何使用Jquery验证方法验证bootstrap 3多选下拉框？

Question

我有一个bootstrap 3 mutliselect下拉框，需要在jquery提交时进行验证：

<select class="form-control input-sm" id="role" name="roles" multiple="multiple" data-toggle="tooltip" data-placement="top">
</select>

$(document)
    .ready(
        function() {
            $("#register-form")
                .validate({
                    rules: {
                        roles: {
                            required: true, //Does not worked 
                        }
                    },
                    messages: {
                        roles: {
                            required: "Please Select Role(s)", //Does not worked 
                        },
                    },
                    errorPlacement: function(error,
                        element) {
                        $(element).closest('.form-group')
                            .find('.help-block').html(
                                error.html());
                    },
                    highlight: function(element) {
                        $(element).closest('.form-group')
                            .removeClass('has-success')
                            .addClass('has-error');
                    },
                    unhighlight: function(element,
                        errorClass, validClass) {
                        $(element).closest('.form-group')
                            .removeClass('has-error')
                            .addClass('has-success');
                        $(element).closest('.form-group')
                            .find('.help-block').html(
                                '');
                    },

                    submitHandler: function(form) {


                        form.submit();
                    }
                });

            $("#role").multiselect({
                nonSelectedText: 'Select Role(s)',
                includeSelectAllOption: true,
                enableCaseInsensitiveFiltering: true,
                maxHeight: 'auto',
                buttonWidth: 'auto',
                enableFiltering: true,
                onChange: function(element, checked) {
                    var brands = $('#role option:selected');
                    var selected = [];
                    $(brands).each(function(index, brand) {
                        selected.push([$(this).val()]);
                    });
                }
            });
        });