{"id":28281752,"url":"https://github.com/marvinified/use-form-input-validator","last_synced_at":"2025-10-03T16:46:41.436Z","repository":{"id":53110150,"uuid":"306525171","full_name":"Marvinified/use-form-input-validator","owner":"Marvinified","description":"React hooks library to validate your form inputs with ease.– blazing fast","archived":false,"fork":false,"pushed_at":"2021-07-26T15:38:04.000Z","size":594,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-21T05:51:18.248Z","etag":null,"topics":["form-validation","input-validation","input-validator","react-hooks-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-form-input-validator","language":"JavaScript","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/Marvinified.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":"2020-10-23T04:01:06.000Z","updated_at":"2021-10-16T16:51:23.000Z","dependencies_parsed_at":"2022-08-29T13:51:13.978Z","dependency_job_id":null,"html_url":"https://github.com/Marvinified/use-form-input-validator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Marvinified/use-form-input-validator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marvinified%2Fuse-form-input-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marvinified%2Fuse-form-input-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marvinified%2Fuse-form-input-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marvinified%2Fuse-form-input-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marvinified","download_url":"https://codeload.github.com/Marvinified/use-form-input-validator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marvinified%2Fuse-form-input-validator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260268176,"owners_count":22983599,"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-validation","input-validation","input-validator","react-hooks-library"],"created_at":"2025-05-21T12:13:34.030Z","updated_at":"2025-10-03T16:46:36.401Z","avatar_url":"https://github.com/Marvinified.png","language":"JavaScript","readme":"# 🆗 use-form-input-validator\n\nReact hooks library to validate your form inputs with easily configurable checks and validators.\n\n[![NPM](https://img.shields.io/npm/v/use-form-input-validator.svg)](https://www.npmjs.com/package/use-form-input-validator) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save use-form-input-validator\n# or\nyarn add use-form-input-validator\n```\n\n## Fork Demo on Codesandbox\n\n[![Edit funny-khayyam-l4cbn](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/funny-khayyam-l4cbn?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n\u003cbr /\u003e\n\n\u003e **What's New**✨ You can now reference other values in the custom validator for scenerios like checking if `confirm password` field matchs password `field`\n\n\u003cbr /\u003e\n\n# Usage\n\n## Simple Usage\n\n```jsx\nimport React from 'react'\nimport useFormValidator from 'use-form-input-validator'\n\nconst App = () =\u003e {\n  const { values, errors, updateField, isAllFieldsValid } = useFormValidator({\n    email: {\n      value: '', // defuallt changes\n      checks: 'required|email' // checks to run on the field on change\n    }\n  })\n\n  const handleSubmit = (e) =\u003e {\n    // verify if all fields are valid before submitting\n    if (isAllFieldsValid()) {\n      // get values easily\n      const { email } = values\n      console.log(email)\n    }\n  }\n  return (\n    \u003cdiv\u003e\n      \u003clabel htmlFor='email'\u003eEmail: \u003c/label\u003e\n      \u003cinput name='email' onChange={updateField} /\u003e\n      \u003cbr /\u003e\n      \u003csmall style={{ color: 'red' }}\u003e{errors.email}\u003c/small\u003e\n      \u003cbr /\u003e\n      \u003cbutton onClick={handleSubmit}\u003eSubmit\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n## Using Checks\n\nCheck allow you to perform common validation easily by specifying a string of list validation rules.\n\nFor example to make an username field required and have a minimium of 5 characters and a maximium of 10 character, you'll have the following `required|min:5|max:10`\n\n```jsx\n  ...\n  useFormValidator({\n    username: {\n      value: '',\n      checks: 'required|min:5|max:10', // checks to run on the field on input change\n    }\n  })\n  ...\n```\n\n## Using a custom validator with checks\n\nYou can add a custom validator in addition to `checks` to create more complex validation rules by using the `validate` as follows.\n\n```jsx\n  ...\n  const { values, errors, updateField, isAllFieldsValid } = useFormValidator({\n    username: {\n      value: '',\n      checks: 'required|min:5|max:10', // checks to run on the field on change\n      // Custom validator\n      validate: (value) =\u003e {\n        if (value.includes('kepler')) {\n          return 'The word \"kepler\" cannot be included in your username'\n        }\n      }\n    }\n  })\n  ...\n```\n\n## Access other fields value\n\nYou can now access other fields values in the custom validator. This is useful in certain scenarios. For example, when you want to check if confirm password field matches the password field.\n\n```jsx\n  ...\n\n  const { values, errors, updateField, isAllFieldsValid } = useFormValidator({\n    password: {\n      value: '',\n      checks: 'required|min:8', // checks to run on the field on change\n    },\n    confirmPassword: {\n      value: '',\n      checks: 'required|min:8', // checks to run on the field on change\n      // Custom validator\n      validate: (value, values) =\u003e {\n          if(value !== values.comfirmPassword){\n            return \"Confirm Password doesn't match passward\"\n          }\n      }\n    }\n  })\n\n  ...\n```\n\n## Check if a field is valid\n\nYou can check if a certain field value is valid\n\n```jsx\nimport React from 'react'\nimport useFormValidator from 'use-form-input-validator'\n\nconst App = () =\u003e {\n  const { values, errors, updateField, isFieldValid } = useFormValidator({\n    email: {\n      value: '', // defuallt changes\n      checks: 'required|email' // checks to run on the field on change\n    }\n  })\n\n  const handleSubmit = (e) =\u003e {\n    // verify if email field is valid before submitting\n    if (isFieldValid('email')) console.log(email)\n  }\n  return (\n    \u003cdiv\u003e\n      \u003clabel htmlFor='email'\u003eEmail: \u003c/label\u003e\n      \u003cinput name='email' onChange={updateField} /\u003e\n      \u003cbr /\u003e\n      \u003csmall style={{ color: 'red' }}\u003e{errors.email}\u003c/small\u003e\n      \u003cbr /\u003e\n      \u003cbutton onClick={handleSubmit}\u003eSubmit\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n## Available Checks\n\n- `alpha`\n\n  The field under validation must be entirely alphabetic characters.\n\n- `alpha_num`\n\n  The field under validation must be entirely alpha-numeric characters.\n\n- `date`\n\n  The field under validation must be a valid date.\n\n- `email`\n\n  The field under validation must be a valid email address.\n\n- `match:`_`regex`_\n\n  he field under validation must match the given regular expression.\n\n- `min:`_`limit`_\n\n  The field under validation must have a minimium of _`limit`_ number of character.\n\n- `max:`_`limit`_\n\n  The field under validation must have a maximium of _`limit`_ number of character.\n\n- `num`\n\n  The field under validation must be a number\n\n- `tel`\n\n  The field under validation must be a mobile phone number\n\n## License\n\nMIT © [Marvinified](https://github.com/Marvinified)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarvinified%2Fuse-form-input-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarvinified%2Fuse-form-input-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarvinified%2Fuse-form-input-validator/lists"}