Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

b-form submit.prevent doesn't work

See original GitHub issue

I have this

  <b-form v-on:submit.prevent="onSubmit" class="col-sm-12 col-md-6">
     ....
     <b-button type="submit" variant="primary">Register</b-button>
  </b-form>

and the onSubmit method is not being called and it works with regular form tag

Issue Analytics

State:
Created 6 years ago
Comments:15 (12 by maintainers)

Top GitHub Comments

8reactions

Overdrivrcommented, Jan 25, 2019

If like me, it’s the third time you face weird behavior with your forms (for instance, using v-on:submit.native.prevent="onSubmit" still does not prevent redirection if you press enter), the only correct way to make forms is:

<b-form @submit.prevent="yourFormSubmissionMethod">
   <b-button type="submit"></b-button>
</b-form>

As far as I’ve tried, any other technique causes unwanted redirections (either by pressing the button or pressing Enter)

3reactions

alexsasharegancommented, Jun 30, 2017

I may open a PR on vue to better document this very necessary feature.

Top Results From Across the Web

Vue Prevent form submit when pressing enter inside form

You can prevent submission on enter key down just annotating the top-level form. <form @submit.prevent="handleLogin" @keydown.enter="$event.

Prevent Form Submission in Vue.js - SoftAuthor

In this article, I'm going to cover two different ways to prevent default form submission behaviour using vue.js.

Vue modal form @submit.prevent not working - Laracasts

I'm working on an internal Nova tool and I need to protect a delete button with a modal. My problem is I can't...

Form Validation - Vue.js

Fairly short and simple. We define an array to hold errors and set null values for the three form fields. The checkForm logic...

Form | Components - BootstrapVue

Form component and form helper components that optionally supports inline form styles and ... <template> <div> <b-form @submit.stop.prevent> <label ...