form validation fire on tab button click in jquery

Question

I am using the following code

<div class="row">
    <div class="form-group col-lg-6">
        <label class="col-lg-3 control-label">Package Name</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="packagename" placeholder="Enter package name" />
        </div>
    </div>
</div>

I am validating this textbox with jQuery code as

  $('#frmAddPackage')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                'packagename': {
                    validators: {
                        notEmpty: {
                            message: 'The field required and cannot be empty'
                        },
                        stringLength: {
                            max: 45,
                            message: 'Package Name consists Maximum of 45 character length'
                        },
                    }
                }

In UI, when I press tab button this textbox getting validation.

How to remove the validation fire on tab button click?

I am getting this error in IE browser.

Answer 1

Bydefault, all validation plugin validate input when focused either by mouse click or keyboard tab and validation error triggered if selected element focus change while element(input) empty.

you need to disable the live validation feature which by default enabled so input don't get validate when focus changed from one element to another.

you have 2 options

live:'submitted', //<-- only validate when form submitted
live:'disabled', //<-- Disable the live validation

JS

$(document).ready(function() {
  $('#frmAddPackage')
    .formValidation({
      framework: 'bootstrap',
      live:'submitted',
      icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        'packagename': {
          validators: {
            notEmpty: {
              message: 'The field required and cannot be empty'
            },
            stringLength: {
              max: 45,
              message: 'Package Name consists Maximum of 45 character length'
            },
          }
        }
      }
    });
});

Fiddle Example Checked in IE

UPDATE What you experiencing is known bug of formValidation in IE if input contains placeholder, so either remove placeholder or disable live validation

Reference Link