{"id":13755503,"url":"https://github.com/trendmicro-frontend/react-validation","last_synced_at":"2025-09-04T14:32:38.560Z","repository":{"id":57167657,"uuid":"108260318","full_name":"trendmicro-frontend/react-validation","owner":"trendmicro-frontend","description":"React Validation component","archived":false,"fork":false,"pushed_at":"2023-09-22T14:04:05.000Z","size":1115,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-11-16T09:34:05.550Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-validation","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trendmicro-frontend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-10-25T11:23:47.000Z","updated_at":"2023-09-22T14:04:11.000Z","dependencies_parsed_at":"2024-01-17T15:04:25.018Z","dependency_job_id":"3abfb0dc-9459-4d60-9dcb-ef340b12f9d7","html_url":"https://github.com/trendmicro-frontend/react-validation","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-validation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231970144,"owners_count":18453918,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T10:00:55.416Z","updated_at":"2024-12-31T09:32:59.916Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","readme":"# react-validation [![build status](https://travis-ci.org/trendmicro-frontend/react-validation.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-validation) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-validation/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-validation?branch=master)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-validation.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-validation/)\n\nReact Validation\n\nDemo: https://trendmicro-frontend.github.io/react-validation\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-validation](https://github.com/trendmicro-frontend/react-validation):\n\n    ```\n    npm install --save react @trendmicro/react-validation\n    ```\n\n2. Install [react-validation](https://github.com/trendmicro-frontend/react-validation) with \u003cb\u003e@trendmicro\u003c/b\u003e scope:\n\n    ```js\n    import {\n        createForm, createFormControl,\n        Form, Input, Select, Textarea\n    } from '@trendmicro/react-validation';\n    ```\n \nNote: [Validator.js](https://github.com/chriso/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.\n\n## Usage\n\nFirst, define your own validation functions, like so:\n\n**validations.jsx**\n```jsx\nimport isEmail from 'validator/lib/isEmail';\n\nconst Error = (props) =\u003e (\n    \u003cdiv {...props} style={{ color: '#A94442' }} /\u003e\n);\n\nexport const email = (value, props, components) =\u003e {\n    if (!isEmail(value)) {\n        return (\n            \u003cError\u003e{`${value} is not a valid email.`}\u003c/Error\u003e\n        );\n    }\n};\n\nexport const required = (value, props, components) =\u003e {\n    value = ('' + value).trim();\n    if (!value) {\n        return (\n            \u003cError\u003e{'This field is required.'}\u003c/Error\u003e\n        );\n    }\n};\n```\n\nTo validate an component, pass an array of validation functions with the `validations` prop:\n\n```jsx\n\u003cInput type=\"text\" name=\"email\" validations={[required, email]} /\u003e\n```\n\nLet's put it all together:\n\n```jsx\n\u003cForm\u003e\n    \u003cdiv className=\"form-group\"\u003e\n        \u003clabel\u003e{'E-mail*'}\u003c/label\u003e\n        \u003cInput type=\"email\" name=\"email\" className=\"form-control\" validations={[required, email]} /\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"form-group\"\u003e\n        \u003clabel\u003e{'Password*'}\u003c/label\u003e\n        \u003cInput type=\"password\" name=\"password\" className=\"form-control\" validations={[required]} /\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"form-group\"\u003e\n        \u003clabel\u003e{'Gender*'}\u003c/label\u003e\n        \u003cSelect name=\"gender\" value=\"\" className=\"form-control\" validations={[required]}\u003e\n            \u003coption value=\"\"\u003eSelect your gender\u003c/option\u003e\n            \u003coption value=\"male\"\u003eMale\u003c/option\u003e\n            \u003coption value=\"female\"\u003eFemale\u003c/option\u003e\n        \u003c/Select\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"form-group\"\u003e\n        \u003clabel\u003e{'Description'}\u003c/label\u003e\n        \u003cTextarea name=\"description\" validations={[]} /\u003e\n    \u003c/div\u003e\n\u003c/Form\u003e\n```\n\n## Examples\n\n### Sign In\n\n```jsx\nimport { Form, Input } from '@trendmicro/react-validation';\nimport React, { Component } from 'react';\nimport * as validations from './validations';\n\nexport default class SignIn extends Component {\n    render() {\n        return (\n            \u003cForm\n                ref={node =\u003e {\n                    this.form = node;\n                }}\n                onSubmit{event =\u003e {\n                    event.preventDefault();\n                }}\n                onValidate={err =\u003e {\n                    if (err) {\n                        // You can disable button on validation error\n                        return;\n                    }\n                }}\n            \u003e\n                \u003cdiv className=\"form-group\"\u003e\n                    \u003clabel\u003e{'E-mail*'}\u003c/label\u003e\n                    \u003cInput\n                        type=\"email\"\n                        name=\"email\"\n                        className=\"form-control\"\n                        validations={[validations.required, validations.email]}\n                    /\u003e\n                \u003c/div\u003e\n                \u003cdiv className=\"form-group\"\u003e\n                    \u003clabel\u003e{'Password*'}\u003c/label\u003e\n                    \u003cInput\n                        type=\"password\"\n                        name=\"password\"\n                        className=\"form-control\"\n                        validations={[validations.required]}\n                    /\u003e\n                \u003c/div\u003e\n                \u003cdiv className=\"form-group\"\u003e\n                    \u003cButton\n                        btnStyle=\"flat\"\n                        onClick={() =\u003e {\n                            this.form.validate(err =\u003e {\n                                if (err) {\n                                    return;\n                                }\n\n                                const values = this.form.getValues();\n                                // -\u003e { email: \"somebody@example.com\", password: \"xxxxxx\" }\n                            });\n                        }}\n                    \u003e\n                        Submit\n                    \u003c/Button\u003e\n                \u003c/div\u003e\n            \u003c/Form\u003e\n        );\n    }\n}\n```\n\n## Form Component\n\n```jsx\n\u003cForm\n    {...props}\n    ref={node =\u003e {\n        this.form = node;\n    }}\n    onValidate={err =\u003e { // Error-first callback\n        if (err) {\n            return;\n        }\n    }}\n/\u003e\n```\n### Methods\n\n### validate([name], [callback])\n\nValidates the form or validates controls with the specific name.\n\n**Arguments**\n\n1. [name] *(String)*: The name property in the control.\n2. [callback] *(Function)*: The error-first callback.\n\n**Example**\n\n```js\nthis.form.validate(err =\u003e { // Error-first callback\n    if (err) {\n        return;\n    }\n    \n    const values = this.form.getValues();\n})\n```\n\n### getValues()\n\nGet form control values.\n\n**Return**\n\n*(Object)*: Returns an object containing name/value pairs.\n\n**Example**\n\n```js\nthis.form.getValues();\n// -\u003e { email: \"somebody@example.com\", password: \"......\" }\n```\n\n### Props\n\nName        | Type     | Default | Description\n:---------- | :------- | :------ | :----------\nonValidate  | function |         | An error-first callback to be called on validation.\n\n### Class Properties\n\nName    | Type    | Default | Description\n:------ | :------ | :------ | :----------\nerrors  | array   | []      | A list of validation errors.\n\n**Example**\n\n```js\nthis.form.errors;\n// -\u003e [{...}]\n```\n\n## Input Component\n\n```jsx\n\u003cInput name=\"name\" validations={[required]} /\u003e\n```\n\n### Props\n\nName        | Type   | Default | Description\n:---------- | :----- | :------ | :----------\nname        | string | N/A     | *(Required)* The name of the form control.\nvalidations | array  | []      | An array of validation functions.\n\n### Class Properties\n\nName    | Type    | Default | Description\n:------ | :------ | :------ | :----------\nchecked | boolean | false   | Whether the control is checked - specifically checkbox and radio inputs.\nvalue   | string  | ''      | The value of the form control.\nblurred | boolean | false   | Whether the form control loses focus.\nchanged | boolean | false   | Whether the value or the checked state has changed.\nerror   | Node    | null    | A validation error.\n\n## Select Component\n\n```jsx\n\u003cSelect name=\"gender\" value=\"\" className=\"form-control\" validations={[required]}\u003e\n    \u003coption value=\"\"\u003eSelect your gender\u003c/option\u003e\n    \u003coption value=\"male\"\u003eMale\u003c/option\u003e\n    \u003coption value=\"female\"\u003eFemale\u003c/option\u003e\n\u003c/Select\u003e\n```\n\n### Props\n\nName        | Type   | Default | Description\n:---------- | :----- | :------ | :----------\nname        | string | N/A     | *(Required)* The name of the form control.\nvalidations | array  | []      | An array of validation functions.\n\n### Class Properties\n\nName    | Type    | Default | Description\n:------ | :------ | :------ | :----------\nvalue   | string  | ''      | The value of the form control.\nblurred | boolean | false   | Whether the form control loses focus.\nchanged | boolean | false   | Whether the value has changed.\nerror   | Node    | null    | A validation error.\n\n## Textarea Component\n\n```jsx\n\u003cTextarea name=\"content\" validations={[required]} /\u003e\n```\n\n### Props\n\nName        | Type   | Default | Description\n:---------- | :----- | :------ | :----------\nname        | string | N/A     | *(Required)* The name of the form control.\nvalidations | array  | []      | An array of validation functions.\n\n### Class Properties\n\nName    | Type    | Default | Description\n:------ | :------ | :------ | :----------\nvalue   | string  | ''      | The value of the form control.\nblurred | boolean | false   | Whether the form control loses focus.\nchanged | boolean | false   | Whether the value has changed.\nerror   | Node    | null    | A validation error.\n\n## Creating Custom Components\n\nInstead of using built-it components, you can use `createForm` and `createFormControl` to wrap your own components:\n\n```jsx\nimport { createForm, createFormControl } from '@trendmicro/react-validation';\n\n// Form component\nconst Form = (props) =\u003e (\n    \u003cform {...props} /\u003e\n);\n\n// Input component\nconst Input = ({ error, blurred, changed, ...props }) =\u003e (\n    \u003cdiv\u003e\n        \u003cinput {...props} /\u003e\n        {blurred \u0026\u0026 changed \u0026\u0026 error}\n    \u003c/div\u003e\n);\n\nconst MyForm = createForm()(Form);\nconst MyInput = createFormControl()(Input);\n```\n\n### createForm([options])(component)\n\n#### Arguments\n* [options] *(Object)*: The options object.\n* [options.onValidate] *(Function)*: An error-first callback to be called on validation.\n* component *(Node)*: The component to be wrapped.\n\n### createFormControl(options)(component)\n* [options] *(Object)*: The options object.\n* component *(Node)*: The component to be wrapped.\n\n## License\n\nMIT\n","funding_links":[],"categories":["Trend Micro"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-validation/lists"}