react-validation

React Validation

Demo: https://trendmicro-frontend.github.io/react-validation

Installation

1. Install the latest version of react and react-validation:

   npm install --save react @trendmicro/react-validation

2. Install react-validation with @trendmicro scope:

   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.

Usage

First, define your own validation functions, like so:

validations.jsx

import isEmail from 'validator/lib/isEmail';

const Error = (props) => (
    <div {...props} style={{ color: '#A94442' }} />
);

export const email = (value, props, components) => {
    if (!isEmail(value)) {
        return (
            <Error>{`${value} is not a valid email.`}</Error>
        );
    }
};

export const required = (value, props, components) => {
    value = ('' + value).trim();
    if (!value) {
        return (
            <Error>{'This field is required.'}</Error>
        );
    }
};

To validate an component, pass an array of validation functions with the validations prop:

<Input type="text" name="email" validations={[required, email]} />

Let's put it all together:

<Form>
    <div className="form-group">
        <label>{'E-mail*'}</label>
        <Input type="email" name="email" className="form-control" validations={[required, email]} />
    </div>
    <div className="form-group">
        <label>{'Password*'}</label>
        <Input type="password" name="password" className="form-control" validations={[required]} />
    </div>
    <div className="form-group">
        <label>{'Gender*'}</label>
        <Select name="gender" value="" className="form-control" validations={[required]}>
            <option value="">Select your gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </Select>
    </div>
    <div className="form-group">
        <label>{'Description'}</label>
        <Textarea name="description" validations={[]} />
    </div>
</Form>

Examples

Sign In

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 (
            <Form
                ref={node => {
                    this.form = node;
                }}
                onSubmit{event => {
                    event.preventDefault();
                }}
                onValidate={err => {
                    if (err) {
                        // You can disable button on validation error
                        return;
                    }
                }}
            >
                <div className="form-group">
                    <label>{'E-mail*'}</label>
                    <Input
                        type="email"
                        name="email"
                        className="form-control"
                        validations={[validations.required, validations.email]}
                    />
                </div>
                <div className="form-group">
                    <label>{'Password*'}</label>
                    <Input
                        type="password"
                        name="password"
                        className="form-control"
                        validations={[validations.required]}
                    />
                </div>
                <div className="form-group">
                    <Button
                        btnStyle="flat"
                        onClick={() => {
                            this.form.validate(err => {
                                if (err) {
                                    return;
                                }

                                const values = this.form.getValues();
                                // -> { email: "[email protected]", password: "xxxxxx" }
                            });
                        }}
                    >
                        Submit
                    </Button>
                </div>
            </Form>
        );
    }
}

Form Component

<Form
    {...props}
    ref={node => {
        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

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

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

this.form.errors;
// -> [{...}]

Input Component

<Input name="name" validations={[required]} />

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

<Select name="gender" value="" className="form-control" validations={[required]}>
    <option value="">Select your gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
</Select>

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

<Textarea name="content" validations={[required]} />

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:

import { createForm, createFormControl } from '@trendmicro/react-validation';

// Form component
const Form = (props) => (
    <form {...props} />
);

// Input component
const Input = ({ error, blurred, changed, ...props }) => (
    <div>
        <input {...props} />
        {blurred && changed && error}
    </div>
);

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