DEV Community

Michael Holm
Michael Holm

Posted on

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

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

Top comments (1)

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Pretty cool, I’ve done this before and keeping it simple like this always saves my sanity

close