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