jquerytokenize2

How to apply required validation on toeknize2 controller?


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>

Solution

  • 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();
    }
    });