form-proof

Form Proof

Status

This package is still a work in progress. Not all use cases below have been covered.

Purpose

Form validation should haven't to be a bloated library with tons of dependencies. At the the end of the day, it's not that hard. This small, extendable package attempts to demonstrate that. This library is <2kbs gzipped making it very light weight. The library is meant for forms, but is isomorphic by nature making it great for a wide variety of use cases. Help and suggestions are always welcome.

Dependencies

Form pure has one dependency, a small Promise poly-fill for IE browsers (<1kb gzipped).

Usage

Install the package:

yarn add form-proof

or

npm i --save form-proof

Then use it:

<!-- In the body of my page -->
<form>
  <input type="text" name="name" value="steven" />
  <input type="text" name="email" value="notanemail" />
</form>

import Validator from 'form-proof';

/***
* The field rules is an object with its keys corresponding to the names of our form inputs
* each key has an array of validations that you would like to perform against the input.
***/
const fieldRules = {
  name: ['required', 'min3', 'max20'],
  email: ['required', 'email', 'max30']
};

// then initiate our validator. Our second argument is either undefined or can be the selector for our form.
const validator = new Validator(fieldRules, 'form');

// we can validate a single field. Our second argument 
validator.validate('name').then(error => console.log(error)) // { name: [] }

// we can validate the entire form
validator.validateAll().then(errors => console.log(errors)) // { name: [], email: ['You must provide a valid email address.'] };

API

Validator

Argument	Type	Description
fieldRules	object (required)	An object where the keys correspond to the input names and the values are an array of validations for that field
form	string (optional)	The DOM selector for our form
customValidations	object (optional)	Additional validations
additionalValidationParams	object (optional)	Additional validation parameters that will be passed to the validator

Additional Validations

An object with keys indicating the name of the validation. Each key should be an object with two methods:

• isInvalid - a method that returns true when the validation is invalid and false otherwise
• message - a method that returns a string with the validation message

The validations can override methods as well if they have the same as an existing validation.

Example:

const additionalValidations = {
  // this overrides the default required rule
  required: {
    isInvalid(value, field, rule, additionalValidationParams) {
      return value.length === 0;
    },
    message(value, field, rule, additionalValidationParams) {
      return 'This field value has no length';
    }
  },
  // this is a new rule
  isDivisibleBy3: {
    isInvalid(value, field, rule, additionalValidationParams) {
      return parseInt(value, 10) % 3 !== 0;
    },
    message(value, field, rule, additionalValidationParams) {
      return 'This field is not divisible by 3';
    }
  }
}