{"id":22944419,"url":"https://github.com/surinderlohat/react-form-validation","last_synced_at":"2025-07-06T10:02:53.299Z","repository":{"id":39864720,"uuid":"400124263","full_name":"surinderlohat/react-form-validation","owner":"surinderlohat","description":"Form Validation solution for React JS","archived":false,"fork":false,"pushed_at":"2022-06-03T11:55:25.000Z","size":259,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-05T18:44:55.354Z","etag":null,"topics":["form","form-validation","form-validation-react","form-validator","forms","hooks","react-from","validation"],"latest_commit_sha":null,"homepage":"https://surinderlohat.github.io/react-form-validation/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surinderlohat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-26T10:09:14.000Z","updated_at":"2024-09-17T15:24:29.000Z","dependencies_parsed_at":"2022-09-06T20:31:19.466Z","dependency_job_id":null,"html_url":"https://github.com/surinderlohat/react-form-validation","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/surinderlohat/react-form-validation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-form-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-form-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-form-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-form-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surinderlohat","download_url":"https://codeload.github.com/surinderlohat/react-form-validation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surinderlohat%2Freact-form-validation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260204364,"owners_count":22974122,"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","form-validation","form-validation-react","form-validator","forms","hooks","react-from","validation"],"created_at":"2024-12-14T14:18:29.345Z","updated_at":"2025-07-06T10:02:53.283Z","avatar_url":"https://github.com/surinderlohat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Form validation\n\nForm validation solution for react JS, super easy to use and can handel all the major user cases.\n##### Based on the React hooks and reactive programing.\n#### No extra dependencies pure react js code \u0026 lightweight.\n\n## Features\n1. Easy validations solution for react js pure react js no extra dependency.\n2. Regex validations.\n3. Custom validations.\n4. Email validations.\n5. Many useful form helping methods i.e hasError, hasChanges, isTouched, getValues, getErrors.\n6. Easy to configure.\n7. Nested form fields validations.\n8. Dynamic add/remove fields.\n\n## Installation\n```sh\nnpm install @surinderlohat/react-form-validation\nor\nyarn add @surinderlohat/react-form-validation\n```\n## API Documentation\nhttps://surinderlohat.github.io/react-form-validation/\n\n### Form Helping Methods\n#### Note: all methods are available like: form.onSubmit()\n\n| Method | PARAMS| DESCRIPTION |\n| ------ | ------ |------ |\n| resetToDefault |No | Reset form state to default All fields will be reset to the default state |\n| getField | fieldKey i.e name or user.name if nested field | Return the specific field instance |\n| getChangedFields | No | Return fields with initial value and changed value |\n| clearForm | No | Clear form values and all nested child's |\n| onSubmit | No | Return from values and error state |\n\n\n### Form Getters\n| Name | RETURN Type | RETURN VALUE |\n| ------ | ------ |------ |\n| getValues | object | Return form values in same order we have pass |\n| getErrors | object | Display all errors for each nested field |\n| hasChanges | boolean | Return true if any field has changes |\n\n\n### Field Methods\n| Method | TYPE | RETURN VALUE | \n| ------ | ------ | ------ |\n| hasChanges | Getter | Return field state i.e it's changed or not |\n| hasError | Getter | Return error state of the specific field |\n| isTouched | Getter | if field is touched or not\n| errorMessage| Getter| Return error message for current field from |\n| setValue | Function | Set value of specific field |\n| getValue | Function | Get value of specific field |\n| setRules | (newRules: Rules) | Update field rules on the fly |\n| setError | Function | Set custom error message on specific field |\n| showErrors | Function | Show error without touching the fields |\n### Rules \n``` sh\nRules \n    /* Used to identify which rule we are going to use for a field*/\n    rule: 'min' | 'max' | 'required' | 'same' | 'email' | 'regex' | 'custom' | 'between' | 'range';\n    /* Rule value used to provide value in rule i.e for min:2 max:10 rule value ruleValue will be ruleValue:2 or 5 \n    ruleValue?: any;\n    /* Used to provide custom message for each rule */\n    message?: string;\n    /* For special cases if we need custom validation then this method will help */\n    validation?: (field: IField, form?: ReactForm) =\u003e string;\n```\n\n## How to use\n```sh\nimport { IFieldObject, useReactForm } from '@surinderlohat/react-form-validation';\nimport FormField from '../FormField/FormField';\nimport { Box, Typography, Button, Paper } from '@mui/material';\nimport { FC } from 'react';\n\n// Fields Rules\nconst field: IFieldObject = {\n  name: {\n    label: 'User Name',\n    placeholder: 'Enter your Name',\n    rules: [{ rule: 'required' }],\n  },\n  email: {\n    label: 'Email',\n    placeholder: 'Enter your email',\n    rules: [{ rule: 'email', message: 'Email is not valid' }],\n  },\n  password: {\n    label: 'Password',\n    rules: [{ rule: 'required', message: 'This field is required' }],\n  },\n  confirmPassword: {\n    label: 'Confirm Password',\n    rules: [{ rule: 'required' }, { rule: 'same', ruleValue: 'password', message: 'Should be same as Password' }],\n  },\n};\n\nconst BasicExample: FC = () =\u003e {\n  const form = useReactForm(field);\n  return (\n    \u003cBox sx={{ display: 'flex', justifyContent: 'center' }}\u003e\n      \u003cPaper sx={{ width: '350px', padding: '15px', display: 'grid', gridGap: '15px' }}\u003e\n        \u003cTypography variant=\"h5\"\u003eBasic Signup Validations\u003c/Typography\u003e\n        {Object.keys(field).map(key =\u003e (\n          \u003cFormField key={key} field={form.getField(key)} /\u003e\n        ))}\n        \u003cButton onClick={() =\u003e console.log(form.getValues())} disabled={form.hasError} variant=\"contained\"\u003e\n          Save Changes\n        \u003c/Button\u003e\n        \u003cTypography\u003eHas Changes: {`${form.hasChanges}`}\u003c/Typography\u003e\n        \u003cTypography\u003eHas hasError: {`${form.hasError}`}\u003c/Typography\u003e\n        \u003cButton onClick={() =\u003e form.showErrors()} variant=\"contained\"\u003e\n          Show Errors\n        \u003c/Button\u003e\n      \u003c/Paper\u003e\n    \u003c/Box\u003e\n  );\n};\n\nexport default BasicExample;\n\n```\n\n## Live working Examples\nhttps://codesandbox.io/examples/package/@surinderlohat/react-form-validation\n\nLike this package ? show some love by start this repo\n\nFor more packages like this please checkout: https://github.com/surinderlohat\n\n## License\nMIT **Free Software!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurinderlohat%2Freact-form-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurinderlohat%2Freact-form-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurinderlohat%2Freact-form-validation/lists"}