Why I Built My Own JavaScript Form Validator (and What I Learned Doing It)

Michael Holm — Sun, 22 Jun 2025 16:19:50 +0000

I was working on a simple landing page recently — nothing fancy, just a small form for collecting emails and passwords.

I needed some validation:

Required fields
Minimum length
A tooltip or message if something’s off
Maybe even a shake animation on error (just for fun)

I like to keep things minimal and work directly with the DOM. But every validation library I found felt like too much:

I had to define all the rules in JavaScript

Some required importing dependencies or integrating into a framework

Others didn’t support tooltips or multi-step flows natively

That’s when I decided to just build my own.
I called it BeastValidator.

✅ The Basics
BeastValidator is a small form validation library written in vanilla JS. It:

Uses HTML attributes (required, minlength, data-pattern, etc.)
Supports tooltips or inline messages
Animates fields on error (optional)
Works with multi-step forms ([data-step])
Supports custom and async validators
Allows multilingual messages (en, da, de, even pirate 🏴‍☠️)

Here’s a minimal example:

<input name="email" type="email" required /> <input name="password" minlength="6" />

new BeastValidator('#myForm', { tooltips: 'top-center', shakeInput: true, onSuccess: () => alert('Valid! 🎉') });

🧠 Why This Approach?
I was just tired of rewriting the same validation logic over and over again — especially because Safari sometimes doesn’t play nicely with built-in validation. I didn’t want to install a massive package just to validate two fields.

This approach keeps everything in the markup, is framework-agnostic, and gives full control over UX.

🧪 Try It
🧪 Live playground here
📦 npm install beast-validator
📚 GitHub repo

💬 I'd Love Feedback
If you have thoughts — whether it's about validation UX, the role of attributes vs JS config, or feature ideas — I’d love to hear it.

Thanks for reading!

— Michael

DEV Community: Michael Holm

Why I Built My Own JavaScript Form Validator (and What I Learned Doing It)