A tiny (532B) library for handling <form> elements.
Alternatives To Formee
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Hook Form36,9221272,73618 hours ago1,003July 17, 202327mitTypeScript
📋 React Hooks for form state management and validation (Web + React Native)
Redux Form12,60011,7811,34912 days ago237March 28, 2023494mitJavaScript
A Higher Order Component using react-redux to keep form state in a Redux store
490a month ago27September 15, 2020173mitSwift
Elegant iOS form builder in Swift
Vee Validate10,1782,1909142 days ago315August 01, 202342mitTypeScript
✅ Painless Vue forms
Formily10,07727812 days ago237July 10, 202338mitTypeScript
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
Parsley.js9,041329466 months ago47December 10, 201970mitJavaScript
Validate your forms, frontend, without writing a single line of javascript
React Final Form7,2825006284 months ago76April 01, 2022390mitJavaScript
🏁 High performance subscription-based form state management for React
Formkit3,572293 days ago263August 16, 202356mitTypeScript
Vue Forms ⚡️ Supercharged
Tcomb Form Native3,16249919a year ago53October 11, 2018128mitJavaScript
Forms library for react-native
Formsy React2,59943 years ago1November 20, 2018149mitJavaScript
A form input builder and validator for React JS
Alternatives To Formee
Select To Compare

Alternative Project Comparisons
A tiny (532B) library for handling <form> elements


  • Includes serialize and validation methods
  • Compatible with any UI library
  • Fully tree-shakeable

Additionally, this module is delivered as:


$ npm install --save formee


👋 View a full demo on CodePen

<form id="foo">
  <input type="email" name="email" />
  <input type="password" name="password" />
  <input type="password" name="confirm" />
const { validate } = require('formee');

const myForm = document.querySelector('#foo');
const myRules = {
  // RegExp rule
  email: /.+\@.+\..+/,
  // Function, with custom error messages
  password(val) {
    if (!val) return 'Required';
    return val.length >= 8 || 'Must be at least 8 characters';
  // Function, comparing to other value
  confirm(val, data) {
    if (!val) return 'Required';
    return val === data.password || 'Must match your password';

myForm.onsubmit = function (ev) {
  let errors = validate(myForm, myRules);
  if (myForm.isValid) return alert('Success!');
  for (let k in errors) {
    // TODO: Render errors manually
    //   with {insert favorite UI lib here}
    console.log(`My rule & element's name: ${k}`);
    console.log('> Error message:', errors[k] || 'Required');
    console.log('> My form element(s):', myForm.elements[k]);



Return: Object

Serializes a <form> into a data object.

Important: Any inputs that are unnamed, disabled, or are of type=file|reset|submit|button will be ignored.


Type: HTMLFormElement

The <form> element to evaluate.

formee.validate(form, rules, toCheck)

Return: Object

Validates a <form> according to its rules.
To check an individual input, you may pass its name as the toCheck value.

Important: The rules key names must match form.elements' names~!

Returns an Object of errors, whose keys are the failing rules keys (and the name=""s of failing elements) and whose values are your error messages (if provided) else false.

Additionally, the <form> and each of its elements will receive a new isValid property with a Boolean value.
For example:

let myForm = document.querySelector('#myform');
let errors = formee.validate(myForm, { ... });

if (!myForm.isValid) {
  let i=0, item;
  for (; i < myForm.elements; i++) {
    item = myForm.elements[i];
    console.log(`${}  Am I valid?`, item.isValid);
    item.isValid || console.log('>> my error message:', errors[]);


Type: HTMLFormElement

The <form> element to validate.


Type: Object

An object of rules for your form's inputs.

Important: The key names must match a <form> element's name="" attribute!

The form values will be serialized before reaching your rule(s). (see serialize)
For example, a select[multiple] may present its value as undefined, a String, or an Array of Strings.

Each rule:

  • May be a RegExp or a Function
  • Must return false or an error message (String) if invalid
  • Otherwise, must return true if valid

Your Function-type rules will receive the corresponding input's value and the entire data object.

validate(form, {
  password(val, data) {
    if (!val) return 'Required';
    if (val.length < 8) return 'Must be at least 8 characters';
    if (val !== data.confirmPassword) return 'Please confirm your password!';
    return true; // all good homie


Type: String
Default: undefined

If set, only the corresponding form element (with name={toCheck}) will be validated.
When unset (default), all form elements will be validated.

Important: The value must match a key within rules and a name="" attribute for one of <form>'s elements.

formee.bind(form, options)

Return: HTMLFormElement

Attaches serialize and validate methods to the <form> element.

Also registers a custom onsubmit handler that will:

  1. event.preventDefault the "submit" event
  2. Perform validate, then a) If all validation passed, call your options.onSubmit function b) Otherwise, call your options.onError function
let myForm = document.querySelector('#myform');

formee.bind(myForm, {
  rules: {
    // ...
  onSubmit(ev) {
    // validation passed!
    console.log(ev.errors); //=> {}
    console.log( === myForm); //=> true
    console.log(myForm.isValid, myForm.errors); //=> true {}
  onError(ev) {
    // validation failed!
    console.log(ev.errors); //=> { ... }
    console.log( === myForm); //=> true
    console.log(myForm.isValid, myForm.errors); //=> false { ... }

// Now available:
// ---
form.validate(/* specific item? */);


Type: HTMLFormElement

The <form> element to evaluate.


Type: Object

Passed directly to validate see rules.


Type: Function
Required: true

The callback to run when validation succeeds fails.

It receives the original event however, a event.errors property is added, containing the output from validate.


Type: Function
Required: true

The callback to run when validation fails.

It receives the original event however, a event.errors property is added, containing the output from validate.


MIT Luke Edwards

Popular Form Projects
Popular Validation Projects
Popular User Interface Components Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.