DEV Community

Piyush Yadav
Piyush Yadav

Posted on

FormEase: Intelligent Form Handling in JavaScript Made Simple


Let’s be honest—forms are boring. But they’re everywhere: contact pages, surveys, registration forms, checkout pages… you name it. And building them properly? That’s where things get messy.

You’ve got to worry about validation, autosave, accessibility, and all kinds of edge cases. Spend hours writing repetitive code just to make sure users don’t submit a blank email field… sound familiar?

What if there was a way to just add a form and have it “just work”? Enter FormEase—a tiny, lightweight JavaScript library that makes forms smart without any headache.

🧩 Why FormEase?

FormEase was built with one goal: stop wasting time on boilerplate and start building amazing experiences.

Here’s what it does for you:

Validates inputs automatically: emails, URLs, numbers, passwords—you name it.

Autosaves data: users can leave your page and come back without losing what they typed.

Accessible by default: works with screen readers, keyboard navigation, and ARIA standards.

Framework-friendly: Vanilla JS, React, Vue, Angular—you’re covered.

Basically, FormEase lets your forms think for themselves, so you don’t have to.

⚡ Quick Start

Installing is a breeze:

npm install @piyushrajyadav/formease

Or if you prefer a CDN:

Then just initialize your form:

import FormEase from '@piyushrajyadav/formease';

// Auto-detects validation rules, autosave, and accessibility
new FormEase('#my-form');

That’s it. Seriously.

🎨 Features You’ll Actually Use
Feature Why It Matters
Smart Validation Auto-detects types like email, phone, URL, number, and more. No more repetitive code.
Auto-Save Saves form data to localStorage with smart debouncing. Users can leave and come back.
Accessibility Full ARIA support + screen reader announcements. Make your forms inclusive.
Customizable Flexible styling, error placement, and even custom validation functions.
Zero Dependencies Lightweight, fast, and no extra baggage.
Framework Agnostic Vanilla JS, React, Vue, Angular—you pick.
TypeScript Full type definitions included for safety and autocompletion.
🛠️ Advanced Usage

FormEase isn’t just plug-and-play—it’s powerful if you need it to be.

Custom Validation Example:

const form = new FormEase('#form', {
validation: {
username: [
{ type: 'required', message: 'Username is required' },
{ type: 'minLength', value: 3, message: 'At least 3 characters' },
{ type: 'custom', validator: (val) => !val.includes(' '), message: 'No spaces allowed' }
]
}
});

Autosave Example:

const form = new FormEase('#form', {
autosave: { enabled: true, interval: 2000, key: 'contact-form-data' }
});

Event Handling Example:

const form = new FormEase('#form', {
onSubmit: (data) => console.log('Form submitted:', data),
onValidationChange: (isValid, errors) => console.log('Valid?', isValid),
onSave: (data) => console.log('Autosaved:', data)
});

🌐 Works Anywhere

React, Vue, Angular, or just plain JavaScript—FormEase is flexible. It doesn’t care which framework you like.

React Example:

import { useEffect, useRef } from 'react';
import FormEase from '@piyushrajyadav/formease';

function ContactForm() {
const formRef = useRef(null);
useEffect(() => {
const formease = new FormEase(formRef.current, {
onSubmit: (data) => console.log('Submitted', data)
});
return () => formease.destroy();
}, []);
return

;
}

💻 Why You’ll Love It

FormEase is small , zero dependencies, tree-shakable, and TypeScript ready. It’s simple for beginners, yet powerful enough for pros.

If you’re tired of writing endless form logic and just want a smart, reliable, and accessible form library, this is it.

🔗 Get FormEase

GitHub: https://github.com/piyushrajyadav/formease

npm: https://www.npmjs.com/package/@piyushrajyadav/formease

Open-source, MIT-licensed, and ready to make your life easier.

FormEase isn’t just a library—it’s your form’s new best friend. Stop worrying about validation, autosave, or accessibility, and start building experiences your users will love

Top comments (0)