When an input field requires more info, the browser shows a message in a bubble about why the input is invalid. I would like to prevent the default for this in vue but I'm not sure how. Below is how I would do it in JavaScript but in Vue, there may be a way to do `@invalid` like how I know you can do `@submit` on a form as an eventListener. I'm also wondering if extra prevention is needed to prevent this in ios or android.

**HTML**

```
<form>
  <input type="text" required>
  <input type="submit">
 </form>

```

**JS**

```
document.querySelector( "input" ).addEventListener( "invalid",
 function( event ) {
        event.preventDefault();
  });

```

<https://codepen.io/albert-anthony4962/pen/BajORVZ>