Nauseating Pumpkin Mush

    @trendmicro/react-validation

    0.1.0 • Public • Published

    react-validation build status Coverage Status

    NPM

    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

    Install

    npm i @trendmicro/react-validation

    DownloadsWeekly Downloads

    281

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase