How To Validate Select Option With Vee-Validate

vue.js vee-validate
TJ Weems picture TJ Weems · Nov 27, 2018 · Viewed 9.5k times · Source

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

vamsi picture vamsi · Jul 16, 2019 
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.

Related questions

Vue js vee validate password confirmation always false

I'm trying to use vee validate to verify the password using this code. <div> <input type="password" placeholder="Password" v-model="password" v-validate="'required|min:6|max:35|confirmed'" name="password" /> </div> <div> <span&…

Read More
Using Vee-validate to disable button until form is filled out correctly

I want to disable my submit button until my form is filled out correctly, this is what I have so far: <form> <input type="text" class="form-control" v-validate="'required|email'" name="email" placeholder="Email" v-model="userCreate.userPrincipalName" /&…

Read More
Vee-Validate custom date validation

I was wondering if there is anyway you can write a custom date validation using vee-validate plugin where the end date cannot be less than the start date? I have looked high and low, and there is nowhere I can …

Read More