Vuelidate reset specific field so that $error flag is false

Question

Using Vuelidate you can reset the validation errors by using this.$v.$reset(). In this Codepen example resetting the lastName field that uses a Vuetify component works - $invalid is true while $error is set to false.

When resetting the regular text input for firstName it doesn't work as the $error flag is still true. How can I modify the text input so that $error is false when calling reset?

I've also tried this.$nextTick(() => {...}) but that doesn't work either.

Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
  maxLength,
  required
} = window.validators

new Vue({
  el: '#app',
  mixins: [validationMixin],
  data: () => ({
    form: {
      firstName: '',
      lastName: ''
    }
  }),
  validations: {
    form: {
      firstName: {
        required, maxLength: maxLength(2)
      },
      lastName: {
        required, maxLength: maxLength(2)
      },
    }
  }
})

input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}

<html>
  <head>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/validators.min.js"></script>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/vuelidate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </head>
  <body>
    <div id="app">
            <label for="firstName">First Name</label>
            <input
              v-model="form.firstName"
              id="firstName"
              class="raw"
              :class="{ 'is-invalid': $v.form.firstName.$error }"
              type="text"
              width="100%"
              :oninput="$v.form.firstName.$touch()"
              :onblur="$v.form.firstName.$touch()"
            />
            <button @click="$v.form.firstName.$touch()">
              $touch
            </button>
            <button @click="$v.form.firstName.$reset()">
              $reset
            </button>
            <pre>{{ $v.form.firstName }}</pre>
    </div>
  </body>
</html>

Not sure why, but it seems to make a difference when you use `@input` and `@blur` instead of `:oninput` and `:onblur`. — D Malan, Jan 30 '20 at 13:29

score 1 · Answer 1 · edited Jul 16 '22 at 03:37

In your example, you are using oninput and onblur HTML attributes, but in Vue, you should use @input(v-on:input) and @blur(v-on:blur) bindings instead. See docs for details.

Replacing HTML attributes with Vue bindings made your example work correctly:

Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
  maxLength,
  required
} = window.validators

new Vue({
  el: '#app',
  mixins: [validationMixin],
  data: () => ({
    form: {
      firstName: '',
      lastName: ''
    }
  }),
  validations: {
    form: {
      firstName: {
        required, maxLength: maxLength(2)
      },
      lastName: {
        required, maxLength: maxLength(2)
      },
    }
  }
})

input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}

<html>
  <head>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/validators.min.js"></script>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/vuelidate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </head>
  <body>
    <div id="app">
            <label for="firstName">First Name</label>
            <input
              v-model="form.firstName"
              id="firstName"
              class="raw"
              :class="{ 'is-invalid': $v.form.firstName.$error }"
              type="text"
              width="100%"
              @input="$v.form.firstName.$touch()"
              @blur="$v.form.firstName.$touch()"
            />
            <button @click="$v.form.firstName.$touch()">
              $touch
            </button>
            <button @click="$v.form.firstName.$reset()">
              $reset
            </button>
            <pre>{{ $v.form.firstName }}</pre>
    </div>
  </body>
</html>

score -3 · Answer 2 · answered Jun 20 '20 at 07:52

-3

This is Issue From Vuelidate and they must be fixed, in this position you can not reset form and give same (badly) behavior you can re-render by the router

// re render component for reset all fileds
this.$router.go(0)

answered Jun 20 '20 at 07:52

hamidreza nikoonia

2,007
20
28

2

If this is a Vuelidate bug, consider adding a link to a related Github issue. – Max Oct 07 '20 at 05:53

Vuelidate reset specific field so that $error flag is false

2 Answers2