Moving validation into our custom inputs

The amazing thing about having your own custom components is that you can craft them in any way you like. For this chapter, we're going to add support for both a valid and an invalid status to our components. The main validation logic will still be held by the parent, App.vue, as it is the containing component that holds our form.

Follow these steps to add validations:

  1. First, let's add new rules for each of our inputs. Add the following to the validations property:
validations: {form: {first_name: { alpha, required },last_name: { alpha },    email: { email, required },  telephone: {      validPhone: phone => phone.match(/((\(\d{3}\) ?)|(\d{3}-))?       \d{3}-\d{4}/) !== null    },    website: { url }, love: { required ...

Get Building Forms with Vue.js now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.