Using vee-validate for validation of dropbox

Question

Sorry for the very basic question

I'm trying to validate a form using vee-validate. text/email/number fields are not a problem. But I couldn't find a good documentation on validating dropdown/checkbox/radio fields.

What I want is "you have to select some option from the dropdown". For that i tried

<p class="help is-danger" v-show="standard===''">Select the standard student is studing in.</p>

where standard is the property which is binded with the help of v-model="standard". This is working as intended, but i want this message to be shown when dropdown is "touched". I'm not able to figure this out.

Answer 1

I found a workaround for this,

<div class="select" :class="{'is-success': standard!='', 'is-danger': standard=='' && standardIsFocused}">
   <select v-model="standard" @focus.once="standardToggle()">
      ...
   </select>
 </div>
 <p class="help has-text-left is-danger" v-show="standard==='' && standardIsFocused">Selecting one of the option is required.</p>

in script tags

data () {
  return {
    standardIsFocused: false,
  },
methods: {
  standardToggle() {
    this.standardIsFocused = !this.standardIsFocused
  }
}