选择字段的Bootstrap Validator

时间:2014-12-03 19:22:23

标签: twitter-bootstrap twitter-bootstrap-3 jqbootstrapvalidation

在启用提交单击之前,尝试要求两个下拉选择框都有一个选定的选项。缺少什么是不允许插件检查验证?

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.'
                }
            }
        }
    });
});

1 个答案:

答案 0 :(得分:9)

为了使 BootstrapValidator 与其他插件一起使用,您应遵循以下两条规则:

  1. 如果插件更改了字段可见性,请不要排除该字段
  2. 某些插件会隐藏您的字段并创建新元素以更改字段的外观。默认情况下,不会验证隐藏的不可见字段。因此,您需要设置

     excluded: ':disabled'
    

    有关详细信息,请参阅excluded选项。

    1. 如果插件动态更改其值,则重新验证字段:
    2. 大多数插件在更改字段值后触发事件。通过使用这种事件处理程序,您需要让BootstrapValidator重新验证该字段。

      在您的情况下,您只需执行以下操作:

      • 添加excluded选项。
      • 使用notEmpty验证程序代替Callback验证程序。
      • 而不是使用.submit使用.change,以便在字段更改时重新验证字段。

      见下面的代码:

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

      有关详细信息,请参阅Bootstrap Select示例。