{"id":13481305,"url":"https://github.com/semmiverian/react-form-validation","last_synced_at":"2025-03-27T11:32:14.982Z","repository":{"id":102807332,"uuid":"138063706","full_name":"semmiverian/react-form-validation","owner":"semmiverian","description":"Form Validation for React using render props ","archived":false,"fork":false,"pushed_at":"2018-07-23T16:43:53.000Z","size":454,"stargazers_count":52,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-04T08:07:45.049Z","etag":null,"topics":["form-validation","react","render-props"],"latest_commit_sha":null,"homepage":null,"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/semmiverian.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-06-20T17:17:43.000Z","updated_at":"2024-06-18T13:42:29.000Z","dependencies_parsed_at":"2023-04-02T12:19:36.877Z","dependency_job_id":null,"html_url":"https://github.com/semmiverian/react-form-validation","commit_stats":{"total_commits":29,"total_committers":1,"mean_commits":29.0,"dds":0.0,"last_synced_commit":"6e998e8f5cb99823564fced77f44c878fe16566b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semmiverian%2Freact-form-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semmiverian%2Freact-form-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semmiverian%2Freact-form-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semmiverian%2Freact-form-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/semmiverian","download_url":"https://codeload.github.com/semmiverian/react-form-validation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222239564,"owners_count":16953975,"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","react","render-props"],"created_at":"2024-07-31T17:00:50.650Z","updated_at":"2024-10-30T14:31:29.722Z","avatar_url":"https://github.com/semmiverian.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Forms"],"readme":"# React Form Validation\n\n## Table of content\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_\n\n- [React Form Validation](#react-form-validation)\n  - [Table of content](#table-of-content)\n  - [Introduction](#introduction)\n- [Installation](#installation)\n  - [Example](#example)\n  - [Available Props](#available-props)\n  - [Children Function](#children-function)\n    - [Arguments in the children function](#arguments-in-the-children-function)\n      - [data](#data)\n      - [isValidate](#isvalidate)\n      - [errors](#errors)\n      - [onChange](#onchange)\n    - [onSubmit](#onsubmit)\n  - [Rules](#rules) - [Relation between Rule and Data](#relation-between-rule-and-data) - [Using Parameters](#using-parameters) - [Rules As Array](#rules-as-array) - [Rules As String](#rules-as-string) - [Rules As Object and Custom error message](#rules-as-object-and-custom-error-message) - [Custom message For every fail rule](#custom-message-for-every-fail-rule) - [Custom message For detail fail rule](#custom-message-for-detail-fail-rule) - [Available Rules](#available-rules)\n  - [To do](#to-do)\n  - [Thanks to](#thanks-to)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Introduction\n\nWrapper component with ability to validating any user input with various available rules using render props pattern.\nInspired by laravel validation rules\n\n# Installation\n\nUsing Npm\n\n```\nnpm install react-form-validation-render-prop\n```\n\nUsing Yarn\n\n```\nyarn add react-form-validation-render-props\n```\n\n## Example\n\n```javascript\nimport React, { Component } from \"react\";\nimport { Form } from \"react-form-validation-render-props\";\n\nclass App extends Component {\n  state = {\n    email: \"\",\n    password: \"\"\n  };\n\n  // rules using array\n  // rules = {\n  //   email: [\"required\", \"email\"],\n  //   password: [\"required\", \"between:5:10\"]\n  // };\n\n  // rules using string\n  // rules = {\n  //   email: 'required|email',\n  //   password: 'required|between:5:10'\n  // }\n\n  // rules using object and custom global message and custom message\n  rules = {\n    email: {\n      rules: [\"required\", \"email\"],\n      message: \"Please allow me to fill your inbox\"\n    },\n    password: {\n      rules: \"required|between:5:10\",\n      message: {\n        required: \"Allow yourself to come to our system\",\n        between: \"Make yourself secure\"\n      }\n    }\n  };\n\n  onChangeValue = (key, value) =\u003e {\n    this.setState({ [key]: value });\n  };\n\n  onSubmit = (e, valid) =\u003e {\n    e.preventDefault();\n    console.log(valid);\n  };\n\n  render() {\n    return (\n      \u003cForm\n        data={this.state}\n        rules={this.rules}\n        onSubmit={this.onSubmit}\n        onChangeValue={ths.onChangeValue}\n      \u003e\n        {({ isValidate, errors, onChange, data, onSubmit }) =\u003e {\n          return (\n            \u003cform onSubmit={onSubmit}\u003e\n              {data.map(item =\u003e {\n                return (\n                  \u003cdiv key={item.key}\u003e\n                    \u003clabel\u003e{item.key}\u003c/label\u003e\n                    \u003cinput type=\"text\" onChange={onChange(item.key)} /\u003e\n                    {!isValidate \u0026\u0026 (\n                      \u003cspan className=\"has-tex-error\"\u003e\n                        {errors.get(item.key)}\n                      \u003c/span\u003e\n                    )}\n                  \u003c/div\u003e\n                );\n              })}\n              \u003cbutton type=\"submit\"\u003eMasuk\u003c/button\u003e\n            \u003c/form\u003e\n          );\n        }}\n      \u003c/Form\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## Available Props\n\n| Name             | Type                     | Description                                                                                                        | Example                                                                                    | Parameters                                                                                                               |\n| ---------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |\n| data             | `Object`                 | Data that will be validated                                                                                        | `data={email: 'semmivp1@gmail.com, fullName: 'semmi verian}`                               |\n| rules            | `Object/ String / Array` | Collection of rules that will run the validation                                                                   | [More Detail](#rules)                                                                      |\n| onChangeValue    | `function`               | Function that will be called whenever internal `onChange` function is triggered                                    | the `key` and the `value` of what data is being updated.                                   | 1. `key` =\u003e the key of data which is being updated \u003cbr /\u003e 2. `value` =\u003e the updated value                                |\n| onSubmit         | `function`               | Function that will be called whenever interval `onSubmit` function is triggered                                    | `onSubmit=function onSubmit (e, valid) { // code here }`                                   | 1. `e` =\u003e event that being triggered \u003cbr /\u003e 2. `valid` =\u003e flag that will tell whether the validation is passed or failed |\n| children         | `function`               | Children function that will be rendered whatever view you want with utilities given from the library               | `children=({ isValidate, errors, onChange, data, onSubmit }) =\u003e {})` \u003cbr /\u003e Link ke detail | [More Detail](#children-function)                                                                                        |\n| validateOnChange | `boolean`                | Flag that tell library to validate user input whenever internal `onChange` function is triggered default to `true` | validateOnChange={true}                                                                    |\n\n## Children Function\n\nBy Using Children function you have 100% authority to use whatever style you want that will be apply to this library.\n\nThere are two options for you to define the Children props. You can choose what ever style you prefer to define the children function.\n\nThe First Option\n\n```Javascript\n\u003cForm\nchildren={({ isValidate, errors, onChange, data, onSubmit }) =\u003e {\n    return (\u003cform\u003e\u003c/form\u003e)\n}}\u003e\u003c/Form\u003e\n```\n\nThe Second Option\n\n```javascript\n\u003cForm\u003e\n  {({ isValidate, errors, onChange, data, onSubmit }) =\u003e {\n    return \u003cform /\u003e;\n  }}\n\u003c/Form\u003e\n```\n\n#### Arguments in the children function\n\nIn this section we will cover each argument that available inside our children function\n\nExample\n\n```javascript\n\u003cForm\u003e\n  {({ isValidate, errors, onChange, data, onSubmit }) =\u003e {\n    return \u003cform /\u003e;\n  }}\n\u003c/Form\u003e\n```\n\n##### data\n\nis an `Array` that you can use to reference what data is available for you to render.\n\ndata structure\n\n```javascript\n[\n  { key: \"email\", value: \"semmivp1@gmail.com\" },\n  { key: \"fullName\", value: \"semmi verian putera\" }\n];\n```\n\nexample\n\n```javascript\n{\n  ({ isValidate, errors, onChange, data, onSubmit }) =\u003e {\n    return (\n      \u003cform onSubmit={onSubmit}\u003e\n        {data.map(item =\u003e {\n          return (\n            \u003cdiv key={item.key}\u003e\n              \u003clabel\u003e{item.key}\u003c/label\u003e\n              \u003cinput type=\"text\" onChange={onChange(item.key)} /\u003e\n              {!isValidate \u0026\u0026 (\n                \u003cspan className=\"has-tex-error\"\u003e{errors.get(item.key)}\u003c/span\u003e\n              )}\n            \u003c/div\u003e\n          );\n        })}\n        \u003cbutton type=\"submit\"\u003eMasuk\u003c/button\u003e\n      \u003c/form\u003e\n    );\n  };\n}\n```\n\nIn above example we use the `data` arguments to map all available data from our inner component to render at consumer component.\n\n##### isValidate\n\nis a `boolean` to tell you whether all the validation rules is success or failed\n\n##### errors\n\nis a `Class` that will tell you what are the errors for the failed validation\n\nto get the errors for the given key you can use our function like this\n\n```javascript\n\u003cspan className=\"has-tex-error\"\u003e{errors.get(item.key)}\u003c/span\u003e\n```\n\nit will return whatever error message that exist at the given key.\n\n##### onChange\n\nis a `function` that you should apply to let our internal component know what changes from the consumer component and will trigger the validation rules if you set the `validateOnChange` flag to `true`. Whenever this function is called our internal component will trigger a props function `onChangeValue` so you can update your state whenever the input is changing. This function need one arguments which is the key will be updated by the new value. In the above example if we define `\"email\"` as the argument then our component will update the `\"email\"` value at our internal component state.\n\nexample\n\n```javascript\n \u003cinput type=\"text\" onChange={onChange(\"email\")}\n```\n\n#### onSubmit\n\nis a `function` that will trigger our validation to run to every data. Whenever it called it will trigger the props `onSubmit` with two arguments `e` and `valid`.\n\nexample\n\n```javascript\n{\n  ({ isValidate, errors, onChange, onSubmit }) =\u003e {\n    return \u003cform onSubmit={onSubmit} /\u003e;\n  };\n}\n```\n\n## Rules\n\n##### Relation between Rule and Data\n\nevery rules need an object with `[key]: [value]` pair like this example.\n\n```javascript\n rules = {\n    email: [\"required\", \"email\"],\n    password: [\"required\", \"between:5:10\"]\n  };\n\n data = {\n    email: \"semmivp1@gmail.com\",\n    password: \"secret\"\n  }\n\n  \u003cForm data={data} rules={rules}\u003e\u003c/Form\u003e\n```\n\nthe key `email` at rules object will be used to find the value at data object to be validate.\n\nso in the above example the rule `required and email` in the `email` key at rules object will be validate against `semmivp1@gmail.com` in the `email` key at data object.\n\n##### Using Parameters\n\nSome Validation rules need more arguments beside the `data` to be working properly, you can defining arguments in every rules type `Array|String|Object` by using separator `:` the first encounter `:` will be first arguments and so on and so forth.\n\nExample\n\n```javascript\n// between validation\n{\n  password: \"between:5:10\";\n}\n```\n\nin above example 5 will be the first argument and define as variable `min` in our `between` validation rule and 10 will be the second argument and define as variable `max` in our `between` validation rule.\n\n##### Rules As Array\n\nYou can use Array as your rules collection like this\n\n```javascript\nrules = {\n  email: [\"required\", \"email\"],\n  password: [\"required\", \"between:5:10\"]\n};\n```\n\n##### Rules As String\n\nYou can use String as your rules collection like this. You can use multiple validation rule for one data by using separator `|`\n\n```javascript\nrules = {\n  email: \"required|email\",\n  password: \"required|between:5:10\"\n};\n```\n\n##### Rules As Object and Custom error message\n\nBy using Object you will have to define two key for the rule working properly the first one is `rule` that will tell what `rule` should be implemented and the other will be the message that will overwrite the default error message\n\n###### Custom message For every fail rule\n\n```javascript\n{\n    email: {\n      rules: [\"required\", \"email\"],\n      message: \"Please allow me to fill your inbox\"\n    }\n}\n```\n\nby using `String` as the `message` value that string will override every fail validation rules.\n\n###### Custom message For detail fail rule\n\n```javascript\n{\n    password: {\n      rules: \"required|between:5:10\",\n      message: {\n        required: \"Allow yourself to come to our system\",\n        between: \"Make yourself secure\"\n      }\n    }\n}\n```\n\nby using `Object` as the `message` value the error message will be override the key provided by user.\n\nas default required error message is\n\n```\n    field is required\n```\n\nbut if you are using the custom message for the required (key) the error will be override with the given message.\n\n```\nAllow yourself to come to our system\n```\n\n##### Available Rules\n\n```\n [key] is the given data name\n```\n\nsay your validation rule is an object like this\n\n```javascript\nrules = {\n  email: [\"required\", \"email\"],\n  password: [\"required\", \"between:5:10\"]\n};\n```\n\nthen if your email validation is failed in any rules that fail the `[key]` at yout error message will be replace with `email`\n\n| Name          | Extra Parameter(s)                            | Default Error Message                                                        | Invalid Condition                                                                                                       |\n| ------------- | --------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |\n| required      | \u003ccenter\u003e-                                     | [key] field is required                                                      | 1. empty array \u003cbr /\u003e 2. Empty Object \u003cbr /\u003e 3. `null` or empty data                                                    |\n| email         | \u003ccenter\u003e-                                     | [key] field is invalid email address                                         | Invalid email address with regex validation                                                                             |\n| number        | \u003ccenter\u003e-                                     | [key] field is not a numeric value                                           | Not a Number `NaN`                                                                                                      |\n| url           | \u003ccenter\u003e-                                     | [key] field is not a valid Url                                               | Invalid Url with regex validation                                                                                       |\n| max           | \u003ccenter\u003e{max}                                 | [key] field cannot exceed {max} characters                                   | Data `(string)` characters length is exceed the given maximum character                                                 |\n| min           | \u003ccenter\u003e{min}                                 | [key] field must be at least {min} characters                                | Data `(string)` characters length is less than the given minimun character                                              |\n| lessThan      | \u003ccenter\u003e{max}                                 | [key] field must be less than {max}                                          | Data `(number)` is greater than the given maximum number                                                                |\n| greaterThan   | \u003ccenter\u003e{min}                                 | [key] field must be greater than {max}                                       | Data `(number)` is less than the given minimum number                                                                   |\n| between       | \u003ccenter\u003e{min}, {max}                          | [key] field must be at least {min} character and not exceed {max} characters | Data `(String)` characters length is less than the given minimum character and greater than the given maximum character |\n| date          | \u003ccenter\u003e-                                     | [key] field is an invalid Date                                               | Invalid Date with javascript built in date validation                                                                   |\n| ifExist       | \u003ccenter\u003e{otherField} , {otherRule}, {...rest} | the error message will be the same like the {otherRule} validation message   | When the {otherField} is exist and fail the {otherRule} validation rules.                                               |\n| ifDoesntExist | \u003ccenter\u003e{otherField}, {otherRule}, {...rest}  | the error message will be the same like the {otherRule} validation message   | When the {otherField} is not exist and fail the {otherRule} validation rules.                                           |\n| whenTrue      | \u003ccenter\u003e {condition}, {otherRule}, {...rest}  | the error message will be the same like the {otherRule} validation message   | when the {condtion} given is `true as a String` and fail the {otherRule} validation rules                               |\n| whenFalse     | \u003ccenter\u003e {condition}, {otherRule}, {...rest}  | the error message will be the same like the {otherRule} validation message   | when the {condtion} given is `false as a String` and fail the {otherRule} validation rules                              |\n| inArray       | {arrays}                                      | [key] is not included in this array {params}                                 | Data given is not included in the {arrays} arguments.                                                                   |\n| startsWith    | {startWith}                                   | [key] must be start with one of this characters {params}                     | Data given is not start with the given {startWith} arguments.                                                           |\n| endsWith      | {endsWith}                                    | [key] must be end with one of this characters {params}                       | Data given is not start with the given {endsWith} arguments.                                                            |\n\n## To do\n\n- [] Writing Test\n\n## Thanks to\n\n- Kent C Dods - [Advance React Component](https://egghead.io/courses/advanced-react-component-patterns)\n- Jeffrey Way - [Form Validation at vue](https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19)\n- Laravel Validation - [Laravel Validation](https://laravel.com/docs/5.6/validation)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemmiverian%2Freact-form-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsemmiverian%2Freact-form-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemmiverian%2Freact-form-validation/lists"}