[Vuejs]-Why are my Vue/Nuxt Select field states valid by default?

by

0đź‘Ť

HTML Select is a sort of “strange” form element in that validity is typically checking to see if there’s a readable value. Since a select always has something picked, it validates…

This is different from say a telephone input that has a specific pattern required to be valid.

I haven’t used Vuelidate specifically, but I read the docs as saying, if you left the v-model="form.location" there’s a good chance it’s simply validating that a value exists so Any selcted item would qualify.

0đź‘Ť

In my original post, I referenced the dynamic style based on the vuelidate library: :class="{error: appendErrorClass($v.form.location)}"

@PierreSaid responded to this post and later deleted his/her reply. Turns out, his response was helpful in pointing me to some Vuelidate attributes that were able to assist in a workaround for my issue. Thank you, PierreSaid.

I have since updated that dynamic class to be a mixin that looks like this:

export default {
  methods: {
    appendErrorAndValidityClass(field) {
      return {
        error: field.$error,
        invalid: field.$invalid,
      };
    }
  }
};

After importing the mixin into the Vue partial, my select box looks like this:

<select
  id="location"
  name="location"
  v-model="form.location"
  @blur="$v.form.location.$touch()"
  :class="appendErrorAndValidityClass($v.form.location)"
>

This appends a class of invalid when the select field has not been updated. It also updates the error style accordingly. Now, I can assign styles for when the select field has an invalid class. This solves the overall issue for me. Thanks for your help PierreSaid and Bryce.

Leave a comment