CODEWITHSUNDEEP
javascriptvuejs2bootstrap-vuevee-validate
Dhanan
Dhanan

Reputation: 207

How to add VeeValidator3 errors into Bootstrap-Vue Validator

I need to integrate Bootstrap-Vue input form control with VeeValidate. VeeValidate is working fine but I need to get the error behaviour to the text field when there is an error. Right now, I can see the error underneath the field, but the green outline remains around the text field with the check mark inside it.

Text field with green rim indicating valid input, even though vee-validate registers input as invalid

  <validation-provider rules="odd" v-slot="{ errors }">
    <b-form-group
       id="fieldset-1"
       label="Last Name"
       label-for="last-name"
       :valid-feedback="errors[0]"
    >
      <b-form-input id="last-name" v-model="lastName" trim></b-form-input>
      <span class="text-danger" v-show="errors[0]">{{ errors[0] }}</span>
    </b-form-group>
  </validation-provider>

extend('odd', {
  validate: value => {
    return value % 2 !== 0;
  },
  message: 'This field must be an odd number'
});

Upvotes: 1

Views: 886

Answers (2)

Iman Shafiei
Iman Shafiei

Reputation: 1637

I think there is another approach for this problem:

<validation-provider name="Email" 
                     :rules="{ required: true, email: true }"
                     v-slot="validationContext">
    <b-form-group label="Email"
                  :invalid-feedback="validationContext.errors[0]">
        <b-form-input type="email" 
                      v-model="email"
                      :state="getValidationState(validationContext)" />
    </b-form-group>
</validation-provider>

Also you should have a method called getValidationState in your methods:

methods: {
    getValidationState({
        dirty,
        validated,
        valid = null
    }) {
        return dirty || validated ? valid : null;
    },
}

Upvotes: 0

zcoop98
zcoop98

Reputation: 3087

You've got your b-form-group validation backwards. If you want Bootstrap-Vue to indicate an error in the field, then use the state and invalid-feedback props, with the passed flag that VeeValidate provides:

  <validation-provider rules="odd" v-slot="{ errors, passed }">
    <b-form-group
       id="fieldset-1"
       label="Last Name"
       label-for="last-name"
       :invalid-feedback="errors[0]"
       :state="passed"
    >
      <b-form-input id="last-name" v-model="lastName" trim></b-form-input>
    </b-form-group>
  </validation-provider>

This way, the input will show invalid when the field is failing validation, and Bootstrap-Vue will handle displaying the error by itself, instead of having to use a custom <span>.

Upvotes: 2

Related Questions