CODEWITHSUNDEEP
vue.js
Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6887

Add invalid class to form-group using VueValidate to bootstrap CSS

How to add invalid class to form-group if the validation fails on input. By default VueValidate adds to the input.

 <div class="form-group">
        <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>

Currently i am using v-bind:class="{'text-danger': errors.has('mobile')}" on the label and i get red colored label on field error.

If i could add invalid to form-group, it would be better to control with css. Below is my VueValidate Settings

Vue.use(VeeValidate,  {
    aria: true,
    classes: true,
    classNames: {
      invalid: 'is-invalid'
    }
  });

Upvotes: 0

Views: 1123

Answers (1)

aquilesb
aquilesb

Reputation: 2272

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>

Upvotes: 0

Related Questions