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

debugcn 发表于 Dev

克里斯

我一直在查看有关在下拉列表上使用BootStrapValidtor的一些教程，并找到了一个示例，但是它无法验证下拉列表，并且在验证kendoUI multiselect方面也遇到了问题。

现在，我对多选商品的标记是这样的

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

我对剑道下拉列表的标记是这样的

<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"
        }
    });
}

希拉里

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

bootstrapValidator最新版本0.5.3，可以在这里找到
您必须查找，检查和验证kendoMultiSelect并kendoDropDownList在带有bootstrapValidator插件的HTML元素上进行，否则验证将无法进行
您需要bootstrapValidator callback并提供change功能来验证字段并检测其中的任何更改。在这种情况下kendoDropDownList

这是带有kendo plugin和的通用示例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>

小提琴的例子

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。