CODEWITHSUNDEEP
jqueryformvalidation-pluginformvalidation.io
DinosaurHunter
DinosaurHunter

Reputation: 702

jQuery trigger event when form field is validated

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?

Upvotes: 2

Views: 1202

Answers (1)

Gerrit Bertier
Gerrit Bertier

Reputation: 4221

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?

Upvotes: 1

Related Questions