如何在提交没有特定库的表单时验证选择元素？

Question

I want to validate a selectize element while submitting a form.

<form method="post" accept-charset="utf-8" action="/user/edit/2">
    ...
    <div class="selectize">
        <select name="roles" multiple required>
        </select>
    </div>
    ...
    <button type="submit" />
</form>

<script>
var user_roles = $('.selectize select[name="roles[]"]');
var $user_roles = user_roles.selectize({
    options: [{
        value: 'admin',
        label: 'Admin'
    },
    {
        value: 'user',
        label: 'User'
    },
    {
        value: 'developer',
        label: 'Developer'
    }],
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    maxItems: null,
    placeholder: 'Select a role ...',
    valueField: 'value',
    labelField: 'label'
});
...

As you can see, I added an attribute to the selectize element required .

In that case, if I click submit, it doesn't show anything.

I want to show normal jQuery validation message without any library or add any validate script like the following image if the value of selectize element is empty.

Other fields inside the same form show validation messages like the image except the selectize roles element.

Answer 1

It was because of selectize version issue.

Downgrading the version 0.11.0 to 0.8.5 worked for me. So I think we should report the bug or new feature even downgrading works.