Validating 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...