Form Proof
Purpose
Form validation shouldn't have 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 polyfill 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 -->
; /**** 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 = fieldRules 'form'; // we can validate a single field. Our second argument validator // { name: [] } // we can validate the entire formvalidator // { 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: { return valuelength === 0; } { return 'This field value has no length'; } // this is a new rule isDivisibleBy3: { return % 3 !== 0; } { return 'This field is not divisible by 3'; }