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

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-形成

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