Barebone Form Validation for ReactJS
![NPM version][npm-image] ![npm download][download-image]
Bring simple validation to any react froms. To use, simply wrap a React input using the connectInput()
API to instantenously give it validation capabilities (see bellow 1).
Inputs
- Start by creating connected inputs using the
connectInput
API. i.g.:
TextInput.js
;; { // This propagate the input value to the state thisprops } { const showErrors value } = thisprops; return <input className=showErrors && 'error' type="text" value= value onChange= this /> ; }TextInput;
This is will provide your inputs with 2 functionalities :
- Validation: They can now take a
validate
property that accepts an array. See bellow the Connected From section - Character restriction: Display current length of the input, and restrict to a maximun
Connected Form
Now lets' connect the form. Simply create a react from and wrap it in reactivizeForm()
. This is will provide your form with 3 APIs:
- isValid: Return true or false
- showErrors: Will set the
displayErrors
attribute totrue
, allowing to display error message on your form - getFormData: Creates a object of all the inputs values
i.g.:
{ e; if thisprops // Use the form data as you wish console; else // Tell the form to show all errors thisprops; } { const displayErrors = thisprops return <form onSubmit= this > <TextInput ref="simpleInput" validate='required' // Set validation rules displayErrors=displayErrors/> <button type="submit">Validate</button> </form> } default ;
Do not forget to give your inputs a ref
and to pass them the displayErrors
paramter provider by the form
Validation rules
Currently avaialble validations:
- alpha-num
- required
- num
- int
- phone
- isImage
Those can be used on a connectInput()
ed input, like so:
<TextInput validate={['required']} displayErrors={displayErrors} />
connectInput config object
A second, optional config object parameter, can be passed to connectInput
. It contains the following options:
defaultErrorMessages
: An object, containing custom error message for each validator ('email', 'num', etc.). For application wide consistency, these message should be stored into a separate module, and passed to allconnectInput()ed
inputs:
connectInput(TextInput, {
email: 'Enter a valid email addres',
num: 'Numerical characters only'
...
})
-
errorFormatter
: A function throught which will be passed all error messages. Mostly useful for running message throught a translation system -
errorFormatter
: A function throught which will be passed all error messages. Mostly useful for running message throught a translation system -
defaultValidator
: A object containing a validation function (that takes a value and spit outtrue
orfalse
) and a string for error message:
const validateURL = (value) => {
if (!value) return false;
const target = value.target;
return /^(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(target);
}
const defaultValidator = {
validationFunction: validateURL,
errorMessage: 'forms.errors.URL_not_valid'
}
export default connectInput(TextInput, {defaultValidator});