[Vuejs]-Add invalid class to form-group using VueValidate to bootstrap CSS

by

0👍

You can bind a computed function to check errors and return the div’s classes

{
  computed: {
    formGroupClass: function () {
      if (this.error.has('mobile') ){
        return ['form-group', 'invalid']
      }
       return ['form-group']
    }
  }
}
<div :class="formGroupClass">
        <label for="mobile" v-bind:class="{'text-danger': errors.has('mobile')}">Mobile</label>
        <input type="text" v-validate="validation.mobile" class="form-control" v-model="user.mobile" name="mobile" id="mobile" />
        <span class="invalid-feedback">{{ errors.first('mobile') }}</span>
      </div>

Leave a comment