2

我正在尝试触发一个函数来更新进度条的 CSS ......

<div class="progress">
    <div class="progress-bar progress-bar-green" role="progressbar"></div>
</div>

但只有在 formValidation 插件 (formvalidation.io) 验证了一个字段之后

$('form').formValidation({
    framework: 'bootstrap',
    fields: { ... }
});

验证字段后，formValidation 会将has-success类添加到该字段。我创建了一个函数来计算有多少个字段有这个类，计算进度条的百分比宽度并更新 CSS

$('.form-control').on('change keydown', function(){
    var fields = 9;
    var completedFields = $('.has-success').length;
    var percent = (completedFields / fields) * 100;
    $('.progress-bar').css('width', percent + '%');
});

问题是，这只会在第二个字符添加到文本字段或选择更改两次后触发。我认为这是因为该函数在has-success添加类之前触发。

还有其他方法可以解决这个问题吗？

4

1 回答 1

1

您可以在验证后监听错误和成功事件以触发进度条的更新。

请参阅：http: //formvalidation.io/settings/#event-form

.on('err.form.fv', function(e) {
  // The e parameter is same as one
  // in the prevalidate.form.fv event above

  updateProgressBar();
})

.on('success.form.fv', function(e) {
  // The e parameter is same as one
  // in the prevalidate.form.fv event above

  updateProgressBar();
})

PS：你为什么不使用getInvalidFields()插件提供的方法来统计无效字段的数量？

于 2015-11-17T08:51:22.037 回答