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

問題は、 2 番目の文字がテキスト フィールドに追加された後、または選択が 2 回変更された後にのみトリガーされることです。これは、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();
})

getInvalidFields()PS:無効なフィールドの数をカウントするためにプラグインが提供する方法を使用しないのはなぜですか?

于 2015-11-17T08:51:22.037 に答える