Preventing onSubmit

Hi,

Should this work?:

<form v-on:submit.prevent="onSubmit" method="POST" action="/textLabels" accept-charset="UTF-8" id="mainForm">

Thanks,

Mick

It should, generally.

One caveat is that browsers ignore any form of preventing the submit when the form contains only one input element. only god knows why, but that’s how it is.

5 Likes

It is working now like this:

<form v-on:submit.prevent

Now I want the Enter key to move to the next field. Any idea how to do that?

I am trying something like this:

<input v-on:keyup.enter="$event.target.nextElementSibling.focus()" type="text">

Mick

1 Like

This is working.

<input v-on:keyup.enter="setFocus('line2')" class="form-control"  required="true" maxlength="8" name="line1" type="text" id="line1">

new Vue({
    el:'#app',
    methods: {
        setFocus: function (element) {
            document.getElementById(element).focus();
        }
    }
});
1 Like

Who thought that this was a good idea?? I spent 30 minutes trying to figure out why my form was submitting until I came across your comment.

as of 10 June 2018 this v-on:click.prevent="..." still isn’t working properly, to be more precise it behaves weirdly. It took me two days of testing to separate this as a problem. Vue is far from a complete framework, maybe too much to do for one person…

Since this didn’t worked with Vue lifecycle hooks, I tried to use a button that triggers a function displayData() which makes Axios GET request via Node to MongoDB database. So upon a button click data should show on a screen.

<div class="control">    
     <button class="button is-link" v-on:click.prevent="displayData">Display</button>
 </div>

But after clicking a button this front-end get request axios('/api') doesn’t reach server endpoint counterpart Express’s app.get('api'). After I remove .prevent attribute it works normally.

That means that if you have input form on a page that needs preventing page refresh upon clicking ‘Send’, you cannot trigger a GET request function by using Vue lifecycle hooks, so you cannot download data upon first accessing that page. Very bad.

What’s weird, after you enter some data and send it to a server via POST route, suddenly this GET starts to work. So upon page refresh only first GET doesn’t pass to the server, unfortunately first GET is most important if you use lifecycle hooks.

Vue pls fix this!! Don’t waste our precous time.

I have no idea what you want us to fix since you didn’t provide any code samples, and I can’t follow your description.

I can’t say anything about this other than: it usually works, so you probably made a mistake (literally in this thread, the OP could prevent submit successfully) since you don’t share what you actually did try.

Again, since you shared nothing about the actual implementation I can’t say anything other than: This usually works.

That’s your interpretation of a behaviour that likely is related to you doing something wrong. I say “likely” because you don’t share any actual examples so I have to make assumptions.

You didn’t clearly demonstrate what “this” is supposed to be, so we can’t fix “this”.

Don’t wast our time with error reports that don’t demonstrate the supposed error. Thanks.

3 Likes

Thanks man. Such a bogus ‘feature’. This is still an issue in 2019.

You have no idea how much your comment helped with my issue <3

Hey there. I came across this as well! Could you let me know if this bug/caveat is documented somewhere?

This is a browser behaviour, not a Vue behaviour. Don’t know if it’s found somewhere on MEN or similar, sorry

this works for me: @submit.prevent

2 Likes