https://github.com/lostpebble/react-validate
Simple, adaptable validation for React components and forms: https://lostpebble.github.io/react-validate/
https://github.com/lostpebble/react-validate
Last synced: 8 months ago
JSON representation
Simple, adaptable validation for React components and forms: https://lostpebble.github.io/react-validate/
- Host: GitHub
- URL: https://github.com/lostpebble/react-validate
- Owner: lostpebble
- License: mit
- Created: 2016-08-22T09:13:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-11-17T08:18:55.000Z (about 8 years ago)
- Last Synced: 2025-03-27T18:11:50.188Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 620 KB
- Stars: 15
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
### [Examples in action and help getting started here](https://lostpebble.github.io/react-validate/)
***WARNING: Please see first***
---
I'm most likely discontinuing work on this library with the arrival and surging growth of the pretty amazing Formik library which pretty much covers what I was trying to do here and more:
https://github.com/jaredpalmer/formik
If there is a case where you see this library offering something different, please write an issue and perhaps I'd consider pulling out that functionality to create something more focused towards that.
On the other hand, I'm also happy to hand the project over to someone who feels like they can offer something different to Formik when it comes to React and Validation.
React-Validate
-------------
React-Validate aims to simplify validation, be it for forms or any other sequence of components in your React app. To do so, React-Validate provides wrapper components which allow you to write code that is easy to conceptualize and read. These components are as follows:
### **``**
- the basic validation wrapper you'll wrap around any component you want to keep in check
### **``**
- Group bunches of **``** and know if they're all valid or not. You can even group different bunches of **``** if you like, to be notified if all groups are valid or not
For the sake of keeping things simple, we'll refer to the components that are wrapped by `` as **inputs** from now on.
One important concept to grasp before continuing:
There is a difference between something being _invalid_ and something being in a state of _error_.
For a better user experience, even if an input is invalid, we often don't want to shove an error into a user's face straight away.
There are various ways React-Validate deals with this, which we'll get to soon.
Validator functions
-------------
In order for our inputs to be validated we need to define what it means for that input value to be valid.
With React-Validate we do that by means of functions we'll refer to here as **validators**. A validator is a function that
takes only one argument (the input's value) and returns either true or false, valid or invalid respectively.
```
function containsNumbers(value) {
// This tests the regex /d (match a digit)
// against our value
return /\d/.test(value);
}
```
A great library for validator functions is one called [validator](https://github.com/chriso/validator.js),
which we'll use for our examples on this page. One small note to make here: we know our validator functions
can only take one argument (the value to check) but some validator functions will require options,
so sometimes we need to wrap validator functions inside a one argument function like so:
```
function validateLength(value) {
return validator.isLength(value, { min: 6 });
}
```
Simple Example
-------------
Since forms seem to be the most common use of validation, let's start with a simple email and password login form.
```
Email
Password
Submit
```
This is the render method of our simple example.
As you can see we arn't controlling any of the inputs, which is most likely not going to be the case in most forms,
but this is the most basic use of React-Validate and shows how it Just Works™ out the box without any configuration.
Try filling in a valid email and password (6 or more characters) and you'll see `` takes care of enabling and disabling any
element inside of it with a prop of type that's equal to submit, i.e. `type="submit"`.
You'll also notice, there isn't much feedback to the user. This is bad design and can cause frustration. In this example,
if a user types in a password less than 6 characters, how do they know they are in the wrong? This is where error feedback
comes in.
Simple Example with error feedback
-------------
Let's try the same example with feedback this time.
```
Email
{errorMessages.email}
Password
{errorMessages.password}
Submit
```
One of the easiest ways to provide error feedback is to place `` components inside of `` components.
These components will become visible or hidden according to the error settings you've set via props on the `` component. By default,
`` will only display its contents when focus is lost and the input is found to be invalid.
### ** A look at the`` component**
Default CSS class name: `.error-message`
Props
Values and defaults
manual
boolean : default false
Use your own css to make this component visible or hidden. You can target those states with the class names .visible and .hidden
Error feedback configuration
-----------
You can set the following props on `` components to control how and when error messages are displayed: