react-validatus
A simple to use and light-weight React validator component.
The problem
You need to apply multiple validators on form inputs - and not only - and declaratively render a UI using these rules, by applying CSS classes, displaying custom error messages, etc.
The solution
react-validatus
is a simple and light-weight React Component that lets you apply as many validators you need and render your desired UI (by taking advantage of React's render props pattern). It's a wrapper of the excellent validator.js that does the heavy lifting of the validations.
Installation
npm install --save react-validatus
Usage
The Validatus
component requires 2 props in order to work. The first one is the value
that you want to validate, which MUST be of type string. The second one are the validators
you want to apply for the previous value
. The validators MUST be an array of strings and / or objects. You can view all the validators (names, options, etc.) at the official documentation of validator.js. Each validator will validate the value
prop. With this in mind you can use any of the available validators simply by passing their names as strings (ex. "isEmail"). If you need to pass options to a validator you need to pass an object with the name of the validator as key and its options as the value (ex. { isLength: { min:3, max: 10} }).
Finally, you can render your UI of choice by passing a render function as children
to the Validatus
component. The specific function provides as argument an object with 2 keys. The first one is the isValid
key that its type of boolean and is true only if ALL validators are passing (in any other case is false). The second object key validations
, is an object with key names the names of the applied validators and values a boolean for their status (ex. validations: { isEmail: true, isLength: false}
). If an individual validator is passing, the boolean value will be true otherwise will be false.
Example:
At the below example the value email
will be validated with the following validators: isRequired, isEmail, contains and isLength (read more information about the available validators). As you can see the last 2 validators have options. The isValid key will be true ONLY if all validators return true. You can also get individually every validation result from the validations object.
For more examples please check the examples directory.
; <Validatus value="john@gmail.com" validators="isRequired" "isEmail" contains: "@gmail" isLength: min:3 max: 15 > <div className="form-group"> <label htmlFor="email">Email address</label> <input id="email" type="text" name="email" value=email onChange=thisupdateInput className=`form-control ` placeholder="Enter email" /> !validationsisRequired && <div className="invalid-feedback">Field is required</div> !validationsisEmail && <div className="invalid-feedback">Field must be a valid email</div> !validationscontains && <div className="invalid-feedback">Field must contain "@gmail"</div> !validationsisLength && <div className="invalid-feedback">Length must be between 3 and 15</div> </div> </Validatus>
FAQ
I want more examples.
Sure, have a look into the examples directory.
Where can I view ALL the available validators with the otpions / documentation?
Here you can view all the available validators and their the otpions / documentation. Keep in mind that you can use only the validators, not the sanitizers
.
Contributing
Feel free to contribute (see below how you can build, lint and test the package).
Setting up the development enviroment
You need to have node.js installed (any recent node / npm version will do). When you are ready, you can install all dependencies and run the webpack dev server by typing the below commands:
npm install
npm start
open http://localhost:3000
Feel free to change the port from package.json
.
Lint files
Lint all js files:
npm run lint
Auto-fix linting issues:
npm run lint:fix
Run tests
Run all test by typing:
npm test
License
MIT
Authors
Known Issues / TODO
- isMobilePhone cannot accept the third argument (currently the Component supports only validators with maximum arity of 2).