Bootstrapvalidation器 – 下拉列表

这是HTML和JavaScript代码：

   #bootstrapSelectForm .selectContainer .form-control-feedback { /* Adjust feedback icon position */ right: -15px; }       
 
 Language 
   Arabic English French German Other  
 
 
 
 Validate 
 
  

这是JavaScript的代码：

   $(document).ready(function() { $('#bootstrapSelectForm') .find('[name="language"]') .selectpicker() .change(function(e) { // revalidate the language when it is changed $('#bootstrapSelectForm').formValidation('revalidateField', 'language'); }) .end() .formValidation({ icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, excluded: ':disabled', fields: { language: { validators: { notEmpty: { message: 'Please select your native language.' } } } } }); });    

我不能做validation。 我已经完成了所有代码，但仍无法找到解决方案。

Answer 1

您的代码应如下所示。 唯一缺少的是formvalidation.js插件，它不是免费的。

 $(document).ready(function() { $('#bootstrapSelectForm') .find('[name="colors"]') .selectpicker() .change(function(e) { // revalidate the color when it is changed $('#bootstrapSelectForm').formValidation('revalidateField', 'colors'); }) .end() .find('[name="language"]') .selectpicker() .change(function(e) { // revalidate the language when it is changed $('#bootstrapSelectForm').formValidation('revalidateField', 'language'); }) .end() .formValidation({ framework: 'bootstrap', excluded: ':disabled', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { colors: { validators: { callback: { message: 'Please choose 2-4 colors you like most', callback: function(value, validator, $field) { // Get the selected options var options = validator.getFieldElements('colors').val(); return (options != null && options.length >= 2 && options.length <= 4); } } } }, language: { validators: { notEmpty: { message: 'Please select your native language.' } } } } }); }); 

另一种方法是（使用jquery.validate.js）：

的jsfiddle

 $(document).ready(function () { $('#bootstrapSelectForm').validate({ rules: { language: { required: true } }, highlight: function (element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function (element) { element.text('OK!').addClass('valid') .closest('.control-group').removeClass('error').addClass('success'); } }); }); 

Answer 2

这是一个类似的例子，可以在这里找到

您需要导入名为formvalidation.js的包。 它不是免费的官方网站。 如果需要，您可以在这里购买包裹