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
– madalinivascu

2015-11-17 08:35:37 +00:00
Commented Nov 17, 2015 at 8:35 — madalinivascu
– madalinivascu, Commented Nov 17, 2015 at 8:35

Gerrit Bertier · Accepted Answer · 2015-11-17 08:51:22Z

1

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?

answered Nov 17, 2015 at 8:51

Gerrit Bertier

4,2412 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery trigger event when form field is validated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related