Validation of form inputs does not occur during typing, only when the input is blurred

Question

Validation of form inputs does not occur during typing, only when the input is blurred

Currently, I have implemented a combobox with input data validation using Vuelidate:

<template>
    <v-combobox
        clearable
        v-model="surname"
        :items="commonSurnames"
        label="Surname"
        placeholder="Type in the surname"
        class="pt-5 pb-5"
        :error-messages="surnameErrors"
        @input="$v.surname.$touch()"
        @blur="$v.surname.$touch()">
    </v-combobox>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, maxLength } from 'vuelidate/lib/validators'

export default {
    mixins: [validationMixin],
    validations: {
        surname: {
            required,
            maxLength: maxLength(30),
            validSurname(surname) {
                return (
                    /^[a-zA-Z]-?*.+$/.test(surname)
                )
            }
        },
    name: 'Surnames',

    data() {
        return {
            surname: '',
            [...]
    },
    methods: {
        [...]
    },
    computed: {
        surnameErrors() {
            const errors = []
            if (!this.$v.surname.$dirty) return errors
            !this.$v.surname.validSurname && errors.push('Format must be like: Smith or Smith-Wesson')
            !this.$v.surname.maxLength && errors.push('Surname must be at most 30 characters long.')
            !this.$v.surname.required && errors.push('Surname is required.')
            return errors
    }
}
</script>

Versions of components:

  "dependencies": {
    "@vue/compiler-sfc": "^3.0.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vuelidate": "^0.7.5",
    "vuetify": "^2.2.11"
  },

After following the instructions outlined in the Vuetify Documentation, I noticed that my form validation behaves slightly differently. For instance, I am able to exceed the 30-character limit without any notification while typing. The same goes for RegEx validation, where any value is accepted without an error until I leave the input field. Could I have missed something during the copying of the example from the docs, or is there an issue with how the @input listener functions? Perhaps, v-combobox cannot be validated in this manner?

javascript vue.js vuetify.js vuelidate

Answer 1

Answer №1

v-combobox triggers change or input events only when a valid value is selected from the dropdown. The text inputted in the combobox serves as a search query to find a valid value, and this input is linked to the v-combobox's search-input property.

Referencing the v-combobox documentation, you can see that update:search-input event is triggered when the search input changes. This event can be utilized to connect to the validation handler:

<!-- ORIGINAL: -->
<v-combobox @input="$v.surname.$touch()">

<!-- MODIFIED: -->
<v-combobox @update:search-input="$v.surname.$touch()">

Answer 2

v-combobox triggers change or input events only when a valid value is selected from the dropdown. The text inputted in the combobox serves as a search query to find a valid value, and this input is linked to the v-combobox's search-input property.

Referencing the v-combobox documentation, you can see that update:search-input event is triggered when the search input changes. This event can be utilized to connect to the validation handler:

<!-- ORIGINAL: -->
<v-combobox @input="$v.surname.$touch()">

<!-- MODIFIED: -->
<v-combobox @update:search-input="$v.surname.$touch()">

Answer 3

Answer №2

Previously, I utilized a component wrapper that encapsulated v-combobox, v-autocomplete, and v-select (all in one multi-functional wrapper). My suggestion is to use the provided code within a wrapper to avoid the hassle of copying and pasting the fix/workaround.

In order to implement the workaround, it was necessary to delve into the Vuetify sources. This involved manipulating the errorBucket and valid properties within the @update:search-input listener.

Furthermore, emitting 'input' may be required. A minor adjustment is needed to prevent the propagation into the v-combobox value, as it could disrupt the autocomplete functionality. Thus, the code snippet if (this.search) { return; }

For a complete example, you can check out the following link: Codepen

Vue.component(
  'my-combobox', {
  template: `
      <v-combobox
         ref="combobox"
         outlined dense
         v-model="selection"
         v-bind="{ ...$attrs, items, rules: validationRules }"
         v-on="$listeners"
         @update:search-input="onSearch"
         @focus="touched = true"></v-combobox>
      `,
  props: {
    value: String,
    items: Array,
    required: Boolean,
    rules: Array,
  },
  data() {
    return {
      selection: null,
      search: null,
      touched: false,
    };
  },
  computed: {
    validationRules() {
      return [
        ...(this.rules || []),
        (v) => !this.required || (v?.length ?? 0) > 0 || 'Value is required',
      ];
    },
  },
  methods: {
    onSearch(v) {
      if (!this.touched) return;
      this.search = v;
      const $self = this.$refs.combobox;
      $self.errorBucket = this.validationRules.filter(f => f(v) !== true);
      $self.valid = $self.errorBucket.length === 0;
      this.$emit('input', v);
    },
  },
  watch: {
    selection: {
      handler(v) {
        this.$emit('input', v);
      },
    },
    value: {
      immediate: true,
      handler(v) {
        if (this.search) { return; }
        this.selection = v;
      },
    },
  },
});

Answer 4

Previously, I utilized a component wrapper that encapsulated v-combobox, v-autocomplete, and v-select (all in one multi-functional wrapper). My suggestion is to use the provided code within a wrapper to avoid the hassle of copying and pasting the fix/workaround.

In order to implement the workaround, it was necessary to delve into the Vuetify sources. This involved manipulating the errorBucket and valid properties within the @update:search-input listener.

Furthermore, emitting 'input' may be required. A minor adjustment is needed to prevent the propagation into the v-combobox value, as it could disrupt the autocomplete functionality. Thus, the code snippet if (this.search) { return; }

For a complete example, you can check out the following link: Codepen

Vue.component(
  'my-combobox', {
  template: `
      <v-combobox
         ref="combobox"
         outlined dense
         v-model="selection"
         v-bind="{ ...$attrs, items, rules: validationRules }"
         v-on="$listeners"
         @update:search-input="onSearch"
         @focus="touched = true"></v-combobox>
      `,
  props: {
    value: String,
    items: Array,
    required: Boolean,
    rules: Array,
  },
  data() {
    return {
      selection: null,
      search: null,
      touched: false,
    };
  },
  computed: {
    validationRules() {
      return [
        ...(this.rules || []),
        (v) => !this.required || (v?.length ?? 0) > 0 || 'Value is required',
      ];
    },
  },
  methods: {
    onSearch(v) {
      if (!this.touched) return;
      this.search = v;
      const $self = this.$refs.combobox;
      $self.errorBucket = this.validationRules.filter(f => f(v) !== true);
      $self.valid = $self.errorBucket.length === 0;
      this.$emit('input', v);
    },
  },
  watch: {
    selection: {
      handler(v) {
        this.$emit('input', v);
      },
    },
    value: {
      immediate: true,
      handler(v) {
        if (this.search) { return; }
        this.selection = v;
      },
    },
  },
});

Validation of form inputs does not occur during typing, only when the input is blurred

Answer №1

Answer №2

Similar questions

Creating a dynamic collection of N triangles in a container using CSS

Creating an image on an HTML canvas using RGB values

How do I utilize Ajax to compare the value selected from a drop down menu in a form with entries in my database, and retrieve the corresponding record/row to automatically fill in a form?

Why does the address bar show value changes in IE when using window.location.hash, but the value doesn't change in the DOM when going

Instructions for activating and deactivating a numerical input field with a checkbox

Displaying the size of a JSON array in Vue.js

Scroll through the div to quickly find the relevant content

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

The Vuetifyjs 2.0 theme remains unchanged despite using watchers

What causes the Object expected error in jQuery?

Skipping MongoDB in loop operations in a Node.js environment.The original text was modified to

Text randomly appears on the html page

Ways to move down only one level of an element's children, excluding sub-levels

What is the best way to assign a return value to a variable in JavaScript?

How can I use Angular to bind the text entered in an `input` within one `ng-repeat` `div` to another `div` within a different `ng-repeat`?

An error stating that "DataTable is not a recognized function" occurred within the document function

How can Backbone.js utilize Ajax to bind data to a Collection?

Emulate the CSS hover effect with jQuery 코드 희미한

I attempted to include multiple images in my HTML using Vue.js, but encountered an error message stating "illegal invocation"

Tips for utilizing ajax function to refresh database entries