Question

我一直在查看有关在下拉列表中使用BootStrapValidtor的几个教程，并找到了一个示例，但它未能验证下拉列表，我也遇到了验证kendoUI多选的问题。

现在我的多选的标记就是这个

<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>

在我的验证器脚本中，这个多选的特别是这个..

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

我对kendo下拉列表的标记就是这个

<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>

及其验证器脚本部分是这个

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

我正在创建多重选择

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

我的下拉列表就是这个

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

我建议您使用Kendo UI Validator，但如果您仍想使用bootstrapValidator，那么您需要

bootstrapValidator最新版本0.5.3，可以找到它here
您必须使用kendoMultiSelect插件查找，检查并验证HTML元素上的kendoDropDownList和bootstrapValidator，否则验证将无效
您需要bootstrapValidator callback和change函数来验证字段并检测其中的任何更改。在这种情况下使用kendoDropDownList

以下是kendo plugin和bootstrapValidator

＆＃13;

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

＆＃13;

<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>

＆＃13;

Fiddle Example

如何在kendoMultiSelect和kendoDropDownList上使用Bootstrap Validator？

1 个答案: