Vue.js 2 Cookbook

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() {       console.info('fake AJAX request')     }   } })

Run this app and try to submit the form with an empty field or wrong e-mail. You should see help from the browser itself:

Then, if you try to enter an invalid e-mail ...