Skip to content

Commit

Permalink
docs: add novalidate to tutorial closes #4466
Browse files Browse the repository at this point in the history
  • Loading branch information
logaretm committed Sep 29, 2023
1 parent ea2f58f commit 93ac1b7
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions docs/src/pages/tutorials/basics.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ First, start by adding some markup, you can start by having a `form` wrapping a
```vue
<template>
<div id="app">
<form>
<form novalidate>
<input type="email" name="email" />
<button>Sign up for newsletter</button>
Expand All @@ -100,6 +100,8 @@ You will notice that the form submits and you should see `?email=` added in your

This is the native HTML form submission behavior. Usually, in modern applications, you don't want that and you prefer to handle submission with JavaScript.

The `novalidate` attribute on the `<form>` element is meant to disable the native HTML form validation, we will get to validating the form by the end of this tutorial.

<div class="tutorial-step">

Add a `submit` event handler that prevents the native form submission, we will use `onSubmit` function to handle our form submission.
Expand All @@ -109,7 +111,7 @@ Add a `submit` event handler that prevents the native form submission, we will u
```vue{3,13-17}
<template>
<div id="app">
<form @submit.prevent="onSubmit">
<form novalidate @submit.prevent="onSubmit">
<input type="email" name="email" />
<button>Sign up for newsletter</button>
Expand Down Expand Up @@ -144,7 +146,7 @@ VeeValidate exposes 2 components that you will be using regularly, the `<Field>`
Import them and register them on the Vue component, then replace the following elements with the vee-validate component:

- Replace `<input>` with `<Field />` while keeping the same attributes.
- Replace `<form>` with `<Form />` but remove the `.prevent` modifier.
- Replace `<form>` with `<Form />` but remove both the `.prevent` modifier and the `novalidate` attribute.

</div>

Expand Down

0 comments on commit 93ac1b7

Please sign in to comment.