React Validation
npm install @trendmicro/react-validation
React Validation
Demo: https://trendmicro-frontend.github.io/react-validation
1. Install the latest version of react and react-validation:
``
npm install --save react @trendmicro/react-validation
2. Install react-validation with @trendmicro scope:
`js`
import {
createForm, createFormControl,
Form, Input, Select, Textarea
} from '@trendmicro/react-validation';
Note: 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.
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 (
}
);
}
};
export const required = (value, props, components) => {
value = ('' + value).trim();
if (!value) {
return (
);
}
};
`
To validate an component, pass an array of validation functions with the validations prop:
`jsx`
Let's put it all together:
`jsx`
`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;
}
}}
>
const values = this.form.getValues();
// -> { email: "somebody@example.com", password: "xxxxxx" }
});
}}
>
Submit
Form Component
jsx
ref={node => {
this.form = node;
}}
onValidate={err => { // Error-first callback
if (err) {
return;
}
}}
/>
`
$3
$3
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();
})
`$3
Get form control values.
Return
(Object): Returns an object containing name/value pairs.
Example
js
this.form.getValues();
// -> { email: "somebody@example.com", password: "......" }
`$3
Name | Type | Default | Description
:---------- | :------- | :------ | :----------
onValidate | function | | An error-first callback to be called on validation.
$3
Name | Type | Default | Description
:------ | :------ | :------ | :----------
errors | array | [] | A list of validation errors.
Example
js
this.form.errors;
// -> [{...}]
`Input Component
jsx
`$3
Name | Type | Default | Description
:---------- | :----- | :------ | :----------
name | string | N/A | (Required) The name of the form control.
validations | array | [] | An array of validation functions.
$3
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
`$3
Name | Type | Default | Description
:---------- | :----- | :------ | :----------
name | string | N/A | (Required) The name of the form control.
validations | array | [] | An array of validation functions.
$3
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
`$3
Name | Type | Default | Description
:---------- | :----- | :------ | :----------
name | string | N/A | (Required) The name of the form control.
validations | array | [] | An array of validation functions.
$3
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
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);
``#### 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.
MIT