How To Validate Select Option With Vee-Validate

4
votes

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>
2
vue.jsvee-validate
This works fine, just put a space between <span and v-show. Proof - Ohgodwhy
@Ohgodwhy, what is wrong with my example? JSFiddle - TJ Weems
@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
@Ohgodwhy, I added this v-validate="{ is_not: option }" - TJ Weems

2 Answers

1
votes
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.

0
votes

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