{"id":285313,"date":"2019-04-02T07:25:41","date_gmt":"2019-04-02T14:25:41","guid":{"rendered":"http:\/\/css-tricks.com\/?p=285313"},"modified":"2019-04-02T07:28:33","modified_gmt":"2019-04-02T14:28:33","slug":"form-validation-in-under-an-hour-with-vuelidate","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/form-validation-in-under-an-hour-with-vuelidate\/","title":{"rendered":"Form Validation in Under an Hour with Vuelidate"},"content":{"rendered":"

Form validation has a reputation for being tricky to implement. In this tutorial, we\u2019ll break things down to alleviate some of that pain. Creating nice abstractions for forms is something that Vue.js excels at and Vuelidate<\/a> is personally my favorite option for validations because it doesn’t require a lot of hassle. Plus, it’s really flexible, so we don\u2019t even have to do it how I\u2019m going to cover it here. This is just a launching point.<\/p>\n

If you simply want to copy and paste my full working example, it\u2019s at the end. Go ahead. I won\u2019t tell. Then your time spent is definitely under an hour and more, like, two minutes amirite?! Ahh, the internet is a beautiful place.<\/p>\n

<\/p>\n

You may find you need to modify the form we’re using in this post so, in that case, you can read the full thing. We\u2019ll start with a simple case and gradually build out a more concrete example. Finally, we\u2019ll go through how to show form errors when the user has completed the form.<\/p>\n

Simplest case: showing the entry once you\u2019re done with the input<\/h3>\n

First, let\u2019s show how we\u2019d work with Vuelidate. We\u2019ll need to create an object called validations<\/code> that will mirror the data structure of what we\u2019re trying to capture in the form. In the simplest terms, it would look like this:<\/p>\n

data: {\r\n  name: \u2018\u2019\r\n},\r\nvalidations: {\r\n  name: {\r\n    required\r\n  }\r\n}<\/code><\/pre>\n