How to use Bootstrap Validator on kendoMultiSelect and kendoDropDownList?

Question

I been looking over a couple tutorials on using BootStrapValidtor on dropdowns and found an example, but it is failing to validate the dropdown and I also am running into issues with validating a kendoUI multiselect.

Right now my markup for the multiselect is this

<div class="form-group">
    <label for="ddAdministrationManufacturerCatalog" class="control-label col-md-2" id="lblAdministrationClientCatalogMultiSelect"><b>Catalog</b></label>
    <div class="col-md-8">
        <select id="msManufacturerCatalogs" multiple name="catalog"></select>
    </div>
</div>

and in my validator script for this multiselect in particular is this..

catalog: {
    message: "Catalog is required",
    validators: {
        notEmpty: {
            message: "Please choose a catalog"
        }
    }
}

my markup for the kendo dropdownlist is this

<div class="form-group">
    <label for="acCountries" class="control-label col-md-2" id="lblAdministrationManufacturerCountry"><b>Country</b></label>
    <div class="col-md-10">
        <select id="acCountries" class="form-control" name="country"></select>
    </div>
</div>

and its validator script part is this

country: {
    message: "Country is required",
    validators: {
        notEmpty: {
            message: "Please provide a Country"
        },
        greaterThan: {
            value: 0,
            message: "Required"
        }
    }
}

I am creating the multiselect as this

function CatalogDropDown(manufacturerCatalogs) {
    $("#msManufacturerCatalogs").kendoMultiSelect({
        dataSource: manufacturerCatalogs,
        dataTextField: "CatalogName",
        dataValueField: "CatalogID"
    });
}

and my dropdownlist is this

function ShowCountries(countryData) {
    $("#acCountries").kendoDropDownList({
        dataSource: countryData,
        dataTextField: "dictionaryName",
        dataValueField: "dictionaryItemID",
        animation: {
            close: {
                effects: "zoom:out",
                duration: 500
            }
        },
        optionLabel: {
            dictionaryName: "-- Select Country --",
            dictionaryItemID: "0"
        }
    });
}

Answer 1

I would suggest to use Kendo UI Validator but if you still want to go with bootstrapValidator then you need

1. bootstrapValidator latest version 0.5.3, can find it here
2. you have to find, check and validate kendoMultiSelect and kendoDropDownList on HTML element with bootstrapValidator plugin, otherwise validation will not work
3. you need bootstrapValidator callback and change function to validate the fields and detect any change in it. In this case with kendoDropDownList

Here is generic example with kendo plugin and bootstrapValidator

$(document).ready(function () {
  $('#Form')
    .find('[name="country"]')
    .kendoDropDownList({
      animation: {
        close: {
          effects: "zoom:out",
          duration: 500
        }
      },
    })
    // Revalidate the country when it is changed
    .change(function (e) {
      $('#Form').bootstrapValidator('revalidateField', 'country');
    })
    .end()
    .find('[name="catalog"]')
    .kendoMultiSelect()
    // Revalidate the catalog when it is changed
    .change(function (e) {
      $('#Form').bootstrapValidator('revalidateField', 'catalog');
    })
    .end()
    .bootstrapValidator({
    excluded: ':disabled', //<--- You need to exclude disabled fields
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      country: {
        message: "Country is required",
        validators: {
          notEmpty: {
            message: "Please provide a Country"
          },
          greaterThan: {
            value: 0,
            message: "Required"
          }
        }
      },
      catalog: {
        validators: {
          callback: {
            message: "Catalog is required",
            callback: function (value, validator) {
              // Get the selected options and minimum 2 are required
              var options = validator.getFieldElements('catalog').val();
              return (options != null && options.length >= 2 && options.length <= 4);
            }
          }
        }
      }
    }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.blueopal.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>

<form id="Form">
  <div class="form-group">
    <label for="ddAdministrationManufacturerCatalog" class="control-label col-md-2" id="lblAdministrationClientCatalogMultiSelect"><b>Catalog</b></label>
    <div class="col-md-8">
      <select id="msManufacturerCatalogs" class="form-control" multiple name="catalog">
        <option value="1">Steven White</option>
        <option value="2">Nancy King</option>
        <option value="3">Nancy Davolio</option>
        <option value="4">Robert Davolio</option>
        <option value="5">Michael Leverling</option>
        <option value="6">Andrew Callahan</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="acCountries" class="control-label col-md-2" id="lblAdministrationManufacturerCountry"><b>Country</b></label>
    <div class="col-md-10">
      <select id="acCountries" class="form-control" name="country">
        <option>Select</option>
        <option value="1">Michael Suyama</option>
        <option value="2">Anne King</option>
        <option value="3">Laura Peacock</option>
        <option value="4">Robert Fuller</option>
        <option value="5">Janet White</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-3 col-md-8">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Fiddle Example