Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Vue Communicates with the Internet Chapter 14

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 address, you will see the following:

How it works...

We are using a native HTML5 validation API, which internally uses pattern matching to

check whether what we are typing is conformant to certain rules.

Consider the attribute required in the following line:

<input type="text" required>

This ensures that when we submit the form, the field is actually populated while having
type="email" in the other input element ensures that the content resembles an e-mail

format.

This API is very rich and you can read more at
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validat

ion.