[Vuejs]-How do i force user from leaving input box untill the error is resolved or value correct according to validation in vue3?

by

1👍

✅

Add blur event, and check, use ref … if blur and if input has error, focus input.

<template>
  <div class="home">
    <form class="field">
      <input
      id="movieInput"
      type="text"
      placeholder="Search for a movie"
      ref="movieInput"
      @input="onInput"
      @blur="onBlurInput"
      />
    </form>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data: () => ({
    isFieldError: true,
  }),
  methods: {
    onInput(event) {
      const { value } = event.target;
      this.isFieldError = value.length < 3;
    },
    onBlurInput() {
      if (this.isFieldError) {
        this.$refs.movieInput.focus();
      }
    },
  },
};
</script>

Leave a comment