title: How to use Vuelidate to show errors only when user is finished with input
body: <p>I have the following form built with Bootstrap-Vue, which has a bit of Vuelidation code applied to it.</p>
  
  <pre><code>&lt;b-form @submit.prevent="onSubmit"&gt;
        &lt;input type="hidden" name="_token" :value="csrf" /&gt;
        &lt;transition-group name="fade"&gt;
          &lt;b-form-select
            :class="{ 'hasError': $v.form.dobDate.$error }"
            class="mb-3"
            name="dobDate"
            id="dobDate"
            v-model.lazy="$v.form.dobDate.$model"
            :options="optionsDays"
            v-if="isSixteen"
            key="dobDateSelect"
          &gt;
            &lt;template slot="first"&gt;
              &lt;option value disabled&gt;Please select a date&lt;/option&gt;
            &lt;/template&gt;
          &lt;/b-form-select&gt;
        &lt;/transition-group&gt;
        &lt;transition-group name="fade"&gt;
          &lt;b-form-select
            :class="{ 'hasError': $v.form.dobMonth.$error }"
            class="mb-3"
            name="dobMonth"
            id="dobMonth"
            v-model.lazy="$v.form.dobMonth.$model"
            :options="optionsMonths"
            v-if="isSixteen"
            value="optionsMonths.key"
            key="dobMonthSelect"
          &gt;
            &lt;template slot="first"&gt;
              &lt;option value disabled&gt;Please select a Month&lt;/option&gt;
            &lt;/template&gt;
          &lt;/b-form-select&gt;
        &lt;/transition-group&gt;
  
        &lt;b-alert
          show
          variant="danger"
          class="error"
          v-if="!$v.form.dobYear.required"
        &gt;This field is required&lt;/b-alert&gt;
  
        &lt;b-alert
          show
          variant="danger"
          class="error"
          v-if="!$v.form.dobYear.minLength"
        &gt;Field must have at least {{ $v.form.dobYear.$params.minLength.min }} characters.&lt;/b-alert&gt;
  
        &lt;b-alert class="error" v-if="!$v.form.dobYear.numeric"&gt;Please enter a valid year of birth&lt;/b-alert&gt;
  
        &lt;b-alert show variant="danger" v-if="belowSixteen"&gt;You are underage&lt;/b-alert&gt;
  
        &lt;b-form-input
          :class="{ 'hasError': $v.form.dobYear.$error }"
          placeholder="Year of Birth"
          v-model="form.dobYear"
          @blur="$v.form.dobYear.$touch()"
          autofocus
          class="form-control mb-3"
          name="year"
          id="year"
          maxlength="4"
          @keyup="checkAge"
        &gt;&lt;/b-form-input&gt;
  
        &lt;b-button
          class="btn btn-lg btn-primary btn-block"
          type="submit"
          variant="primary"
          :disabled="$v.$invalid||belowSixteen"
        &gt;Submit&lt;/b-button&gt;
        &lt;b-alert
          show
          variant="danger"
          v-if="belowSixteen"
          class="error mt-3"
        &gt;Sorry you have to be over 16 to play&lt;/b-alert&gt;
      &lt;/b-form&gt;
  </code></pre>
  
  <p>But currently I am getting immediate feedback when the page loads which can be jarring for the user. Instead I want the errors to show when the user has finished with the input/select.</p>
  
  <p>I have tried using @blur="$v.form.dobYear.$touch()" however it doesn't seem to work at all. What am I doing wrong?</p>
  
  <p>Here is a snipper of how my validations look like in my script currently:</p>
  
  <pre><code>validations: {
      form: {
        dobYear: {
          required,
          minLength: minLength(4),
          maxLength: maxLength(4),
          numeric
        },
        dobMonth: {
          required: requiredIf(function() {
            return this.isSixteen;
          })
        },
        dobDate: {
          required: requiredIf(function() {
            return this.isSixteen;
          })
        }
      }
    }
  </code></pre>