twitter-bootstrap 用于选择字段的 Bootstrap 验证器

Bootstrap Validator for select fields

提问by Matt

Trying to require that both drop down selection boxes have a chosen option before submit is enabled to be clicked. What is missing that is not allowing the plugin to check for validation?

试图要求两个下拉选择框都有一个选定的选项，然后才能单击提交。缺少什么不允许插件检查验证？

FORM:

形式：

<form role="form" id="bootstrapSelectForm" class="form-horizontal">
  <div class="row">
  <div class="col-xs-6">
  <br>
      <h5>Region</h5>
        <select class="form-control" name="region" id="region" >
                   <option value="">Select a Region</option>
                   <option value="US">US</option>
                   <option value="UK">UK</option>
                   <option value="Sales Team">XS (Sales Team)</option>
                   <option value="Editorial Test">XT (Editorial Test)</option>
        </select>
    </div>
    <div class="col-xs-6">
    <br>
      <h5>Duration</h5>
        <select class="form-control" name="duration" id="duration" >
                   <option value="">Select a Duration</option>
                   <option value="5">5 Minutes</option>
                   <option value="10">10 Minutes</option>
                   <option value="15">15 Minutes</option>
                   <option value="20">20 Minutes</option>
                   <option value="25">25 Minutes</option>
                   <option value="30">30 Minutes</option>
        </select>
    </div>
    <div class="col-xs-6">
    <button type="submit" class="btn btn-default" id="submit">Submit</button>
    </div>
  </div>

Bootstrap Validator:

引导验证器：

$(document).ready(function() {
$('#bootstrapSelectForm')
    .find('[name="region"]')
        .selectpicker()
        .submit(function(e) {
            $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region');
        })
        .end()
    .find('[name="duration"]')
        .selectpicker()
        .submit(function(e) {
            $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration');
        })
        .end()
    .bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            region: {
                validators: {
                    callback: {
                        message: 'Please select region',

                        }
                    }
                }
            },
            duration: {
                validators: {
                        message: 'Please select region.'
                }
            }
        }
    });
});

回答by Arkni

In order to make BootstrapValidatorwork together with other plugin, you should follow two rules below:

为了使BootstrapValidator与其他插件一起工作，您应该遵循以下两个规则：

1. Don't exclude the field if the plugin changes the field visibility

1. 如果插件更改了字段可见性，则不要排除该字段

Some plugins hide your field and create new elements to change how the field looks like. By default, the hidden, invisible fields will not be validated. Therefore, you need to set

一些插件会隐藏您的字段并创建新元素来更改字段的外观。默认情况下，不会验证隐藏的不可见字段。因此，您需要设置

 excluded: ':disabled'

See the excludedoption for more information.

有关更多信息，请参阅排除选项。

1. Revalidate the field if the plugin changes its value dynamically:

2. 如果插件动态更改其值，则重新验证该字段：

Most plugins trigger an event after changing the field value. By using this kind of event handler, you need to ask BootstrapValidator to revalidate the field.

大多数插件在更改字段值后触发事件。通过使用这种事件处理程序，您需要要求 BootstrapValidator 重新验证该字段。

In your case, you have just to do the following:

在您的情况下，您只需执行以下操作：

• Add the excludedoption.
• Use notEmptyvalidator instead of the Callbackvalidator.
• Instead of using .submituse .changein order to revalidate the field when it's changed.

• 添加excluded选项。
• 使用notEmpty验证器而不是Callback验证器。
• 而不是使用.submituse 来.change在更改时重新验证字段。

See code bellow:

看下面的代码：

$('#bootstrapSelectForm')
   .find('[name="region"]')
     .selectpicker()
       .change(function(e) {
         $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region');
       })
       .end()
   .find('[name="duration"]')
     .selectpicker()
      .change(function(e) {
        $('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration');
      })
      .end()
   .bootstrapValidator({
      feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
      },
      excluded: ':disabled', // <=== Add the excluded option
      fields: {
         region: {
            validators: {
               notEmpty: { // <=== Use notEmpty instead of Callback validator
                  message: 'Please select region'
               }
            }
         }
         duration: {
             validators: {
                notEmpty: { // <=== Use notEmpty instead of Callback validator
                   message: 'Please select region.'
                }
             }
         }
      }
   }
 });

See Bootstrap Selectexample for more information.

有关更多信息，请参阅Bootstrap Select示例。