How To Validate Select Option With Vee-Validate

Question

Going through vee-validates documentation I don't see anything for validating select inputs. So my question is can you validate selects? Currently what I try does not display an error message...

Here is the code

<select id="category" v-model="client.category" name="Category Type" v-validate="'required'">
  <option disabled>{{option}}</option>
  <option v-for="category in categories" :key="category.id" :value="category">{{ category }}</option>
 </select>
 <spanv-show="errors.has('Category Type')">{{ errors.first('Category Type') }}</span>

Answer 1

Well I found this question and I know the answer would be the right on a year ago. But right now yes, we can validate an object in a select. So for those select using and object as a value you can add the required validation as a custom one like this:

extend('objectNotEmpty', {
  validate: (value) => {
    if (Object.keys(value).length > 0) {
      return true;
    }
    return i18n.t('GENERAL_VALIDATION_MESSAGES_REQUIRED');
  },
});

And of course add 'objectNotEmpty' in the list of the rules in your ValidationProvider