Vue: Event listener for "invalid" is not working

[petr001]

Version

2.5.17

Reproduction link

https://codesandbox.io/s/2p6zqqo75j

Steps to reproduce

When form is in invalid state no event handler is called

What is expected?

v-on:invalid should run the handler function

What is actually happening?

nothing

[LinusBorg]

Not Vue-related,

That event is fired in the input element, not the form element, and it doesn't bubble.

So this works as expected:

<template>
  <form ref="form" @submit.prevent="handleSubmit">
    <input @invalid="handleInvalid" required>
    <button type="submit">Submit</button>

    <p>{{ msg }}</p>
  </form>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    msg: 'Not validated yet'
  }),
  methods: {
    handleSubmit() {
      this.msg = 'submit event fired';
    },
    handleInvalid() {
      this.msg = 'invalid event fired';
    }
  }
};
</script>

[petr001]

Not true. If you manually addEventListener for invalid on form element it works correctly!

[petr001]

This is link for vanilla and working javascript: https://codesandbox.io/s/3vl6rq4jmm

[posva]

You are missing the capture in your vue version: @invalid.capture.prevent="handleInvalid"

[LinusBorg]

Yeah, posva beat me to it. Only works with capture since the event doesn't bubble.

Should have thought of that solution first.

[petr001]

Perfect, working as expected, thank you all.