Question

我正在尝试触发一个函数来更新进度条的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类之前触发。

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

Answer 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()方法来计算无效字段的数量？

验证表单字段时的jQuery触发器事件

1 个答案: