{"id":25289014,"url":"https://github.com/newoldmax/react-native-validator-form","last_synced_at":"2025-10-27T22:30:53.196Z","repository":{"id":46927062,"uuid":"86427409","full_name":"NewOldMax/react-native-validator-form","owner":"NewOldMax","description":"Simple validator for react-native forms.","archived":false,"fork":false,"pushed_at":"2022-12-09T18:40:51.000Z","size":1662,"stargazers_count":21,"open_issues_count":13,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-11T23:05:53.003Z","etag":null,"topics":["form","react","react-native","validation"],"latest_commit_sha":null,"homepage":null,"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/NewOldMax.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}},"created_at":"2017-03-28T07:15:40.000Z","updated_at":"2022-10-25T08:43:05.000Z","dependencies_parsed_at":"2023-01-25T23:02:03.263Z","dependency_job_id":null,"html_url":"https://github.com/NewOldMax/react-native-validator-form","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-native-validator-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-native-validator-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-native-validator-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewOldMax%2Freact-native-validator-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NewOldMax","download_url":"https://codeload.github.com/NewOldMax/react-native-validator-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238566076,"owners_count":19493410,"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":["form","react","react-native","validation"],"created_at":"2025-02-12T23:27:47.778Z","updated_at":"2025-10-27T22:30:52.832Z","avatar_url":"https://github.com/NewOldMax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Validation component for react-native forms\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://badge.fury.io/js/react-native-validator-form.svg)](https://badge.fury.io/js/react-native-validator-form)\n[![Build Status](https://travis-ci.org/NewOldMax/react-native-validator-form.svg?branch=master)](https://travis-ci.org/NewOldMax/react-native-validator-form)\n\nSimple form validation component for React-Native inspired by [formsy-react](https://github.com/christianalfoni/formsy-react).\nWeb version: [react-material-ui-form-validator](https://github.com/NewOldMax/react-material-ui-form-validator)\n\nUnfortunately I don't have Mac, so this library is tested only on Android.\n\nSupported types:\n+ TextInput\n\nDefault validation rules:\n+ matchRegexp\n+ isEmail\n+ isEmpty\n+ required\n+ trim\n+ isNumber\n+ isFloat\n+ isPositive\n+ minNumber\n+ maxNumber\n+ minFloat\n+ maxFloat\n+ minStringLength\n+ maxStringLength\n+ isString\n\nSome rules can accept extra parameter, example:\n````javascript\n\u003cTextValidator\n   {...someProps}\n   validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}\n/\u003e\n````\n\n### Example\n\n\u003cimg src=\"https://raw.githubusercontent.com/NewOldMax/react-native-validator-form/master/examples/example.gif\" width=\"285\"\u003e\n\n### Usage\n\n````javascript\n\nimport React from 'react';\nimport { Button } from 'react-native';\nimport { Form, TextValidator } from 'react-native-validator-form';\n\nclass MyForm extends React.Component {\n    state = {\n        email: '',\n    }\n\n    handleChange = (email) =\u003e {\n        this.setState({ email });\n    }\n\n    submit = () =\u003e {\n        // your submit logic\n    }\n\n    handleSubmit = () =\u003e {\n        this.refs.form.submit();\n    }\n\n    render() {\n        const { email } = this.state;\n        return (\n            \u003cForm\n                ref=\"form\"\n                onSubmit={this.submit}\n            \u003e\n                \u003cTextValidator\n                    name=\"email\"\n                    label=\"email\"\n                    validators={['required', 'isEmail']}\n                    errorMessages={['This field is required', 'Email invalid']}\n                    placeholder=\"Your email\"\n                    type=\"text\"\n                    keyboardType=\"email-address\"\n                    value={email}\n                    onChangeText={this.handleChange}\n                /\u003e\n                 \u003cButton\n                    title=\"Submit\"\n                    onPress={this.handleSubmit}\n                /\u003e\n            \u003c/Form\u003e\n        );\n    }\n}\n\n````\n\n#### You can add your own rules\n````javascript\nForm.addValidationRule('isPasswordMatch', (value) =\u003e {\n    if (value !== this.state.user.password) {\n        return false;\n    }\n    return true;\n});\n````\nAnd remove them\n````javascript\ncomponentWillUnmount() {\n    Form.removeValidationRule('isPasswordMatch');\n}\n````\nUsage\n````javascript\nimport React from 'react';\nimport { Button } from 'react-native';\nimport { Form, TextValidator } from 'react-native-validator-form';\n\nclass ResetPasswordForm extends React.Component {\n    state = {\n        user: {},\n    }\n\n    componentWillMount() {\n        // custom rule will have name 'isPasswordMatch'\n        Form.addValidationRule('isPasswordMatch', (value) =\u003e {\n            if (value !== this.state.user.password) {\n                return false;\n            }\n            return true;\n        });\n    }\n\n    componentWillUnmount() {\n        Form.removeValidationRule('isPasswordMatch');\n    }\n\n    handlePassword = (event) =\u003e {\n        const { user } = this.state;\n        user.password = event.nativeEvent.text;\n        this.setState({ user });\n    }\n\n    handleRepeatPassword = (event) =\u003e {\n        const { user } = this.state;\n        user.repeatPassword = event.nativeEvent.text;\n        this.setState({ user });\n    }\n\n    submit = () =\u003e {\n        // your submit logic\n    }\n\n    handleSubmit = () =\u003e {\n        this.refs.form.submit();\n    }\n\n    render() {\n        const { user } = this.state;\n        return (\n            \u003cForm\n                ref=\"form\"\n                onSubmit={this.handleSubmit}\n            \u003e\n                \u003cTextValidator\n                    name=\"password\"\n                    label=\"text\"\n                    secureTextEntry\n                    validators={['required']}\n                    errorMessages={['This field is required']}\n                    type=\"text\"\n                    value={user.password}\n                    onChange={this.handlePassword}\n                /\u003e\n                \u003cTextValidator\n                    name=\"repeatPassword\"\n                    label=\"text\"\n                    secureTextEntry\n                    validators={['isPasswordMatch','required']}\n                    errorMessages={['Password mismatch','This field is required']}\n                    type=\"text\"\n                    value={user.repeatPassword}\n                    onChange={this.handleRepeatPassword}\n                /\u003e\n                \u003cButton\n                    title=\"Submit\"\n                    onPress={this.handleSubmit}\n                /\u003e\n            \u003c/Form\u003e\n        );\n    }\n}\n````\n\n##### [Advanced usage](https://github.com/NewOldMax/react-native-validator-form/wiki)\n\n### API\n\n#### Form\n\n+ Props\n\n| Prop            | Required | Type     | Default value | Description                                                                                                                  |\n|-----------------|----------|----------|---------------|------------------------------------------------------------------------------------------------------------------------------|\n| onSubmit        | true     | function |               | Callback for form that fires when all validations are passed                                                                 |\n| instantValidate | false    | bool     | true         | If true, form will be validated after each field change. If false, form will be validated only after clicking submit button. |\n| onError         | false    | function |               | Callback for form that fires when some of validations are not passed. It will return array of elements which not valid. |\n| debounceTime    | false    | number   | 0             | Debounce time for validation i.e. your validation will run after `debounceTime` ms when you stop changing your input |\n\n+ Methods\n\n| Name             | Params | Return | Descriptipon                                       |\n|------------------|--------|--------|----------------------------------------------------|\n| resetValidations |        |        | Reset validation messages for all validated inputs |\n| isFormValid      | dryRun: bool (default true) | Promise   | Get form validation state in a Promise (`true` if whole form is valid). Run with `dryRun = false` to show validation errors on form |\n\n#### All validated fields (Input)\n\n+ Props\n\n| Prop            | Required | Type     | Default value | Description                                                                            |\n|-----------------|----------|----------|---------------|----------------------------------------------------------------------------------------|\n| validators      | false    | array    |               | Array of validators. See list of default validators above.                             |\n| errorMessages   | false    | array    |               | Array of error messages. Order of messages should be the same as `validators` prop.    |\n| name            | true     | string   |               | Name of input                                                                          |\n| errorStyle      | false    | object   | { container: { top: 0, left: 0, position: 'absolute' }, text: { color: 'red' }, underlineValidColor: 'gray', underlineInvalidColor: 'red' } }             | Error styles                                                                          |\n| validatorListener | false  | function |               | It triggers after each validation. It will return `true` or `false`                    |\n| withRequiredValidator | false | bool  |               | Allow to use `required` validator in any validation trigger, not only form submit      |\n\n+ Methods\n\n| Name             | Params | Return | Descriptipon                                       |\n|------------------|--------|--------|----------------------------------------------------|\n| getErrorMessage  |        |        | Get error validation message                       |\n| validate         | value: any, includeRequired: bool | | Run validation for current component |\n| isValid          |        | bool   | Return current validation state                    |\n| makeInvalid      |        |        | Set invalid validation state                       |\n| makeValid        |        |        | Set valid validation state                         |\n\n### Contributing\n\nThis component covers all my needs, but feel free to contribute.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewoldmax%2Freact-native-validator-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewoldmax%2Freact-native-validator-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewoldmax%2Freact-native-validator-form/lists"}