Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-validation
React Validation component
https://github.com/trendmicro-frontend/react-validation
Last synced: 11 days ago
JSON representation
React Validation component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-validation
- Owner: trendmicro-frontend
- License: mit
- Created: 2017-10-25T11:23:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-22T14:04:05.000Z (over 1 year ago)
- Last Synced: 2024-11-16T09:34:05.550Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-validation
- Size: 1.06 MB
- Stars: 5
- Watchers: 19
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-validation - React Validation component ([demo](https://trendmicro-frontend.github.io/react-validation/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-validation - React Validation component ([demo](https://trendmicro-frontend.github.io/react-validation/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-validation - React Validation component ([demo](https://trendmicro-frontend.github.io/react-validation/)). (Trend Micro / React Components)
README
# react-validation [](https://travis-ci.org/trendmicro-frontend/react-validation) [](https://coveralls.io/github/trendmicro-frontend/react-validation?branch=master)
[](https://nodei.co/npm/@trendmicro/react-validation/)
React Validation
Demo: https://trendmicro-frontend.github.io/react-validation
## Installation
1. Install the latest version of [react](https://github.com/facebook/react) and [react-validation](https://github.com/trendmicro-frontend/react-validation):
```
npm install --save react @trendmicro/react-validation
```
2. Install [react-validation](https://github.com/trendmicro-frontend/react-validation) with @trendmicro scope:
```js
import {
createForm, createFormControl,
Form, Input, Select, Textarea
} from '@trendmicro/react-validation';
```
Note: [Validator.js](https://github.com/chriso/validator.js) is a library for validating and sanitizing strings. It can save your time when writing validation functions. Check out a list of available validators at https://github.com/chriso/validator.js#validators.
## Usage
First, define your own validation functions, like so:
**validations.jsx**
```jsx
import isEmail from 'validator/lib/isEmail';
const Error = (props) => (
);
export const email = (value, props, components) => {
if (!isEmail(value)) {
return (
{`${value} is not a valid email.`}
);
}
};
export const required = (value, props, components) => {
value = ('' + value).trim();
if (!value) {
return (
{'This field is required.'}
);
}
};
```
To validate an component, pass an array of validation functions with the `validations` prop:
```jsx
```
Let's put it all together:
```jsx
{'E-mail*'}
{'Password*'}
{'Gender*'}
Select your gender
Male
Female
{'Description'}
```
## Examples
### Sign In
```jsx
import { Form, Input } from '@trendmicro/react-validation';
import React, { Component } from 'react';
import * as validations from './validations';
export default class SignIn extends Component {
render() {
return (
{
this.form = node;
}}
onSubmit{event => {
event.preventDefault();
}}
onValidate={err => {
if (err) {
// You can disable button on validation error
return;
}
}}
>
{'E-mail*'}
{'Password*'}
{
this.form.validate(err => {
if (err) {
return;
}
const values = this.form.getValues();
// -> { email: "[email protected]", password: "xxxxxx" }
});
}}
>
Submit
);
}
}
```
## Form Component
```jsx
{
this.form = node;
}}
onValidate={err => { // Error-first callback
if (err) {
return;
}
}}
/>
```
### Methods
### validate([name], [callback])
Validates the form or validates controls with the specific name.
**Arguments**
1. [name] *(String)*: The name property in the control.
2. [callback] *(Function)*: The error-first callback.
**Example**
```js
this.form.validate(err => { // Error-first callback
if (err) {
return;
}
const values = this.form.getValues();
})
```
### getValues()
Get form control values.
**Return**
*(Object)*: Returns an object containing name/value pairs.
**Example**
```js
this.form.getValues();
// -> { email: "[email protected]", password: "......" }
```
### Props
Name | Type | Default | Description
:---------- | :------- | :------ | :----------
onValidate | function | | An error-first callback to be called on validation.
### Class Properties
Name | Type | Default | Description
:------ | :------ | :------ | :----------
errors | array | [] | A list of validation errors.
**Example**
```js
this.form.errors;
// -> [{...}]
```
## Input Component
```jsx
```
### Props
Name | Type | Default | Description
:---------- | :----- | :------ | :----------
name | string | N/A | *(Required)* The name of the form control.
validations | array | [] | An array of validation functions.
### Class Properties
Name | Type | Default | Description
:------ | :------ | :------ | :----------
checked | boolean | false | Whether the control is checked - specifically checkbox and radio inputs.
value | string | '' | The value of the form control.
blurred | boolean | false | Whether the form control loses focus.
changed | boolean | false | Whether the value or the checked state has changed.
error | Node | null | A validation error.
## Select Component
```jsx
Select your gender
Male
Female
```
### Props
Name | Type | Default | Description
:---------- | :----- | :------ | :----------
name | string | N/A | *(Required)* The name of the form control.
validations | array | [] | An array of validation functions.
### Class Properties
Name | Type | Default | Description
:------ | :------ | :------ | :----------
value | string | '' | The value of the form control.
blurred | boolean | false | Whether the form control loses focus.
changed | boolean | false | Whether the value has changed.
error | Node | null | A validation error.
## Textarea Component
```jsx
```
### Props
Name | Type | Default | Description
:---------- | :----- | :------ | :----------
name | string | N/A | *(Required)* The name of the form control.
validations | array | [] | An array of validation functions.
### Class Properties
Name | Type | Default | Description
:------ | :------ | :------ | :----------
value | string | '' | The value of the form control.
blurred | boolean | false | Whether the form control loses focus.
changed | boolean | false | Whether the value has changed.
error | Node | null | A validation error.
## Creating Custom Components
Instead of using built-it components, you can use `createForm` and `createFormControl` to wrap your own components:
```jsx
import { createForm, createFormControl } from '@trendmicro/react-validation';
// Form component
const Form = (props) => (
);
// Input component
const Input = ({ error, blurred, changed, ...props }) => (
{blurred && changed && error}
);
const MyForm = createForm()(Form);
const MyInput = createFormControl()(Input);
```
### createForm([options])(component)
#### Arguments
* [options] *(Object)*: The options object.
* [options.onValidate] *(Function)*: An error-first callback to be called on validation.
* component *(Node)*: The component to be wrapped.
### createFormControl(options)(component)
* [options] *(Object)*: The options object.
* component *(Node)*: The component to be wrapped.
## License
MIT