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?

Answer 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();

Answer 2

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.

Answer 3

try adding this after you put the value in it :

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

Answer 4

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