Vue Communicates with the Internet Chapter 14Validating user data before sending it
Generally, users hate forms. While we can't do much to change that, we can make it less
frustrating for them by providing relevant instructions on how to fill them in. In this recipe,
we will create a form, and we will leverage HTML standards to provide the user with a nice
guidance on how to complete it.
Getting ready
This recipe does not need previous knowledge to be completed. While we will build a form
(the Sending basic AJAX requests with Axios recipe), we will fake the AJAX
call and concentrate on the validation.
How to do it...
We will build a very simple form: one field for the username and one for the user e-mail,
plus one button to submit the information.
Type in this HTML:
<div id="app">
<form @submit.prevent="vueSubmit">
<div>
<label>Name</label>
<input type="text" required>
</div>
<div>
<label>Email</label>
<input type="email" required>
</div>
<div>
<label>Submit</label>
<button type="submit">Submit</button>
</div>
</form>
</div>The Vue instance is trivial, as shown:
new Vue({
el: '#app',
methods: {
vueSubmit() {