Bootstrap validator not working when input field value is set with jQuery .val()

Question

I've got a form with this field:

<form id="formdelivery" class ="form-horizontal form-custom">
    <fieldset>
        <input name="delivery" type="text" class=""  value="">
    </fieldset>
</form>

The value of the input field could be copied from another input with a click on a button:

   $('#copy').click(function () {
        $('[name=delivery]').val($('[name=billing]').val());
        var res = $('#formdelivery').data('bootstrapValidator').validate();
        if (res.$invalidFields.length == 0) {
            alert("ok");
        }
        else {
            alert("no");           
        }
    });

The validation applied on the field is this:

$('#formdelivery').bootstrapValidator({
       fields: {
            delivery: {
                message: 'Invalid',
                validators: {
                    notEmpty: {
                    },
                    stringLength: {
                        min: 2,
                        max: 100,
                        message: 'you need almost 2 chars and not more than 100'
                    }
                }
            }
});

The problem is that clicking on the copy button, bootstrap validator ignores the new value copied with jQuery code $('[name=delivery]').val($('[name=billing]').val());

Am I doing something wrong or is this a issue?

kiks73 · Accepted Answer · 2014-08-12T06:35:46.377

9

As suggested by Youness, I added the $('[name=delivery]').change(); after updating the input content to validate.

Then I added the trigger line to the bootstrap validator initialization:

$('#formdelivery').bootstrapValidator({
       fields: {
            delivery: {
                trigger: 'change keyup',
                ...

In this way validation is done also on change event.

edited Aug 12 '14 at 06:35

answered Aug 11 '14 at 08:43

kiks73

3,718
3
25
52

Can you add this in the html tag? – Maxrunner Oct 20 '14 at 10:38
I don't think that it's possibile to trigger it from The html tag – kiks73 Dec 17 '15 at 13:42
2

You saved my life...! – Tejas Mehta May 02 '18 at 13:14

score 4 · Answer 2 · answered Aug 11 '14 at 08:16

4

try adding this after you put the value in it :

 $('[name=delivery]').change();

answered Aug 11 '14 at 08:16

Youness

1,468
1
9
19

Nothing is changed also adding change(). It seems that validation is done only on the first time the button is pressed. After that, changing values and pressing again the button, the validation state is no more updated. – kiks73 Aug 11 '14 at 08:23

score 2 · Answer 3 · answered Jun 26 '15 at 17:02

2

After setting the value, simply call revalidateField($field) on the form, also works when validating with html attributes data-bv-x

answered Jun 26 '15 at 17:02

atoo

123
9

score 1 · Answer 4 · answered Jun 10 '16 at 07:19

1

Add data-bv-trigger in html5:

<input name="delivery" type="text" class=""  value="" data-bv-trigger="change keyup">

And fire change event after you change programaticly value:

$('[name=delivery]').change();

answered Jun 10 '16 at 07:19

marko.crni

71
4

For me, data-bv-trigger="change keyup" was needed. You saved my day! Thanks – Puneet Pandey Sep 24 '20 at 16:05

Bootstrap validator not working when input field value is set with jQuery .val()

4 Answers4