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

i want user not to leave the input box or cursor should not go to another element until the thrown error is resolved in vue3

CodePudding user response：

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

<template>
  <div >
    <form >
      <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>