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>

@Ohgodwhy, what is wrong with my example? [JSFiddle](https://jsfiddle.net/5q2vwyLb/1/) — TJ Weems, Nov 27 '18 at 15:29
@Ohgodwhy, it appears that setting the select field to my `disabled>{{option}}` is making the validate method think it is okay... if that makes sense.. — TJ Weems, Nov 27 '18 at 15:37

score 2 · Answer 1 · answered Sep 17 '20 at 09:28

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

score 1 · Answer 2 · answered Jul 15 '19 at 23:55

1

v-model="client.category"

v-validate doesn't work if your v-model is a complex object. I'd use strings/numbers to tie option->select and then use some function to model rest of the attributes in the object.

answered Jul 15 '19 at 23:55

vamsi

11
1

How To Validate Select Option With Vee-Validate

2 Answers2