Let's Build for Ruby and Rails Developers - Part 18 - Frontend validation with Vue.js

In part 18 of this Let's Build for Ruby and Rails developers series I begin adding more stateful UI to the mix to help improve the user experience as well as add some validation.

I chose to go with a library called Vuelidate which aids in adding all types of validations to various inputs you may need. There are validators for email, URL, required fields, minimum character length, maximum character length, and much more. You can also create your own custom validators if you need even more control.

This library is not the easiest to work with (at least for me). It seems a little messy to implement and doesn't play well with a store pattern I like to use when working with Vue.js. All that said, trying to roll my own validation would take way too long to cook up so this library should work for now.

If this part is long-winded I apologize. I want to make sure to include some of the struggles in these videos as it's what really happens in the real world of being a developer. Some might not like that approach but I think it's helpful to see many aspects of the development cycle.

If you have any feedback, questions, tips, or concerns feel free to hit me up or reply in the comments.

Enjoy part 18!

=====

Hi, My name is Andy Leverenz and I work as a product designer and developer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

♥️ Sponsor me on GitHub https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/lets-build-for-ruby-and-rails-developers-part-18

💎Ruby on Rails Course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/products/ptt ... https://www.youtube.com/watch?v=Xsl0e48ZiNU