How to apply required validation on toeknize2 controller?

Question

How do i apply required field validation on tokenize2 controller, here main problem is it is select control but it displayed as text box.

Plugin Link : https://zellerda.github.io/Tokenize2/index.html

Code:

<select class="tokenize-demo" multiple>
  <option value="1">Africa</option>
  <option value="2">Americas</option>
  <option value="3">Asia</option>
  <option value="4">Europe</option>
  <option value="5">Oceania</option>
</select>
<script>
  $('.tokenize-demo').tokenize2();
</script>

Answer 1

Add id and name for the select field

<select class="tokenize-demo" name="tokenize_demo[]" id="tokenize_demo" multiple>
<label class="error" for="tokenize_demo" id="tokenize_demo-error"></label>

I used jquery validator for validating

$.validator.addMethod("required", function (value, element){      
  if ($("#tokenize_demo").val() != null && $("#tokenize_demo").val() != "")
  { 
    $(".has-error").removeClass("has-error") 
    $("#tokenize_demo-error").css("display", "none");    
    return true;
  }
  else
  {  
    return false;
  };
});

$('#form_id').validate({
ignore: [],
onkeyup: false,
highlight: function(element) {
  $(element).closest('div').removeClass('has-success').addClass('has-error');
},
success: function(element) {
  $(element).closest('div').removeClass('has-error');
},
rules: {     
  "tokenize_demo[]": {
    required: true
  }
},
messages: {
  "tokenize_demo[]": {
    required: "Field is required."
  }
},
submitHandler: function(form) {      
  form.submit();
}
});