); 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*'}

{'Description'}

</div>
</Form>
```

## 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 (
            <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

```jsx
<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**

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

### Props

### Class Properties

**Example**

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

## Input Component

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

### Props

### Class Properties

## Select Component

```jsx
<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

### Class Properties

## Textarea Component

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

### Props

### Class Properties

## 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) => (
    <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

---
_Source: https://npm.io/package/@trendmicro/react-validation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._