FormFusion: Easy form handling, validation & more

Validation rules

FormFusion extends the list of native input types with a large collection of rules that define and apply a corresponding validation pattern to the input field. You only need to pass the preffered type prop to the input and FormFusion takes care of everything.

There are two ways to apply a validation rule to a field:

1. By passing down the name of the validation rule as the type property:

2. By importing the preferred validation rule and passing it down as the type property. This should be the default approach when using dynamic validation rules or when using some of the formfusion's validation sets.

Currently, FormFusion includes 62 generic validation rules. To use some of the more specific validation rules, you'll need to install the corresponding package.

List of available sets of validation rules:
@formfusion/postcodes
@formfusion/licence-plates
@formfusion/iban
@formfusion/passports
@formfusion/phones
@formfusion/tin
@formfusion/vat

Type	Description
`minCharacters`	Validation rule for minimum character length (5 or more)
`maxCharacters`	Validation rule for maximum character length (7 or fewer)
`charactersRange`	Validation rule for character length within a range (4 to 8 characters)
`minLetters`	Validation rule for minimum number of letters (3 or more)
`maxLetters`	Validation rule for maximum number of letters (5 or fewer)
`lettersRange`	Validation rule for a range of letters (2 to 5 letters)
`contains`	Validation rule used to check if the input value is contained in a given string.
`equals`	Validation rule used when you need to validate if the input value matches a specific string.
`existIn`	Validation rule used to check if a the input value matches any of the specified items in an array.
`notExistIn`	Validation rule used to check if a the input value does not match any of the specified items in an array.
`numeric`	Used for restricting a field to contain only numbers
`alphabetic`	Used for restricting a field to contain only letters
`alphanumeric`	Used for restricting a field to contain only letters or numbers
`lowercase`	Used for validating lowercase strings. A lowercase string is considered valid if it contains only lowercase letters.
`uppercase`	Used for validating uppercase strings. An uppercase string is considered valid if it contains only uppercase letters.
`boolean`	Used for validating boolean values. A boolean value is considered valid if it matches 'true,' 'false,' 'yes,' 'no,' '1,' or '0.'
`hexadecimal`	Used for validating hexadecimal color codes. A valid hexadecimal color code starts with '#' and is followed by six valid hexadecimal characters.
`email`	Used for fields for editing an email address
`url`	Used for fields for editing a url
`username`	Used for username fields. A valid username is considered to contain only alphanumeric characters, @, _, or -
`search`	Used for search bar fields. It allows only numbers, letters and spaces
`tel`	Used for fields for editing a telephone number.A valid phone number should start with a '+' following the country prefix of max 4 digits, a space and the phone number of max 10 characters
`password`	Used for secured password fields. A secured password contains of at least 8 characters of which one lower one uppercase letter, a number and a special character
`creditCardNumberBasic`	Used for credit card number fields. This is the most basic example of CCN that validates only the number of numeric characters. It allows values with only 16 characters
`creditCardNumberHyphen`	Used for credit card number fields. A credit card number is considered valid if it contains only 16 numeric characters delimited by hyphens

Validation rules

Example