Page refreshes when I use html form validation

I try to add form validation with html5 to my login page., strange thing is when I click login button, it refreshes the page, before it was working but there was no form et all, I added form

I am not sure whether it effects but I also added type=“submit” @click.prevent=“login()” to my submit button (actulay I am not submitting a form, just using the form for inputs) but didnt work.

     <form class="needs-validation" id="validated-form"> 
    <h3 class="login-box__title">USER LOGIN</h3>
    <v-input placeholder="E-mail address" v-model="email" required/>
    <span class="text-danger" v-if="validationErrors.email" v-text="validationErrors.email"></span>
    <v-input ref="input2" placeholder="Password" v-model="password" type="password" required/>
    <router-link class="password-forget" to="/password-renew"> Lost Password</router-link>
    {{error}}
    <v-button type="submit" @click.prevent="login()"
      class="green fw shadow-none login-box__submit"
      @click.native="login"
      title="LOGIN"/>
    <div class="or">
      <p class="or__title">OR</p>
    </div>
    <v-button
      class="gray fw shadow-none login-box__submit"
      title="LOGIN WITH FACEBOOK"
    />
</form>

Your button is a v-button which is not a native button, but a custom component.

Try to use @click.native.prevent to trigger the click event natively.

I see in your code above there is 2 @click event on the submit button, which is not supposed to.

1 Like

I added other one to prevent. I thought onclick and onclick.prevenet are different things.
I solved issue by adding prevent inside the custom component. so click.native actualy clicks inside custom component ?

1 Like

I added other one to prevent. I thought onclick and onclick.prevenet are different things.

I’ve never add two @click event on one component, because it’s not a standard practices.

click.native actualy clicks inside custom component ?

Yes, click.native will attach the click event on the custom component’s root element.

For ex:

// custom-component.vue
<template>
  <div>
    <span>I am custom component</span>
  </div>

// on using it
<custom-component @click.native="doSomething" />

The click event will be attached to the <div> element because it’s the root element of <custom-component>.

1 Like

So problem is , I need 2 click events for the button, one for prevent=“submitForm()” and one for doSomething, what you suggest ?

I use prevent=“submitForm()” inside component and it gives me type error

VueButton2.vue?34c2:13 Uncaught TypeError: _vm.submitForm is not a function

To prevent the native browser form submission, place @submit.prevent on the form element.

Personally I prefer to do it this way:

<form @submit.prevent="login">
  <button type="submit">Submit</button>
</form>

this way you don’t need to attach a handler to the button as it will trigger the submit event on the form.

1 Like

I need 2 click events for the button, one for prevent=“submitForm()” and one for doSomething, what you suggest ?

In this case, then you can create a method function that will run both of your function.

onClickSubmit(e) {
  this.doSomething();
  this.submitForm();
}

You can ignore the submitForm() call I wrote above, if you follow @JamesThomson way on how to trigger form submit.

no I I will need no submit form I need doSth and prevent submit, I need to prevent it in order to not refresh at every form send button click

Then you can do as @JamesThomson suggested above.