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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.