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: "somebody@example.com", 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: "somebody@example.com", 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