Vue prevent form submit when pressing enter and using validation-observer-CodePudding

I have the following code:

<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
  <form @submit.prevent>
    <!-- inputs -->
    <button type="submit" @click="handleSubmit(submit)">Save</button>
  </form>
</validation-observer>

I would expect @submit.prevent to prevent from form being submitted when Enter key is pressed in form input but it does not.

How to prevent from form being submitted (globally for all inputs) and trigger validations before submit.

CodePudding user response：

You can add @keydown.enter="$event.preventDefault()" on your form:

  <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
    <form @submit.prevent  @keydown.enter="$event.preventDefault()">
      <!-- input -->
      <button type="submit" @click="handleSubmit(upsert)">Save</button>
    </form>
  </validation-observer>