jQuery trigger event when form field is validated

Question

I'm trying to trigger a function to update the CSS of a progress bar...

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

But only after a field has been validated by the formValidation plugin (formvalidation.io)

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

When a field is validated, formValidation adds the has-success class to the field. I have created a function to count how many fields have this class, calculate a percentage width for the progress bar and update the 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 + '%');
});

The problem is, this only triggers after the second character is added into a text field or after a select is changed twice. I presume this is because the function fires before the has-success class has been added.

Is there another way to go about this?

use keypress instead of keydown – madalinivascu Nov 17 '15 at 08:35 — madalinivascu, Nov 17 '15 at 08:35

score 1 · Answer 1 · answered Nov 17 '15 at 08:51

You could listen to the error and success event after validation to trigger an update of the progress bar.

See: 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: Why don't you use the getInvalidFields() method the plugin offers to count the number of invalid fields?

jQuery trigger event when form field is validated

1 Answers1