|
1 |
| -## form-validation-react |
| 1 | + |
| 2 | +[](https://github.com/arshad-yaseen/form-validation-react/blob/main/LICENCE) |
| 3 | +# Form-Validation-React |
| 4 | + |
| 5 | +### form-validation-react is an easy-to-use npm library that enables developers to add validation rules to form inputs in React. It supports required fields, email formats, and custom rules with various validation functions and options that can be tailored to specific needs. |
| 6 | + |
| 7 | +**Note:** This library is under development. We will be publishing all functions soon. For now, you can use the available functions. |
| 8 | + |
| 9 | + |
| 10 | +## Installation |
| 11 | + |
| 12 | +You can install the package using npm or yarn: |
| 13 | + |
| 14 | +```bash |
| 15 | + npm i form-validation-react |
| 16 | + |
| 17 | +``` |
| 18 | + |
| 19 | +```bash |
| 20 | + yarn add form-validation-react |
| 21 | + |
| 22 | +``` |
| 23 | + |
| 24 | +## Usage |
| 25 | +To use the library, import it in your React component: |
| 26 | + |
| 27 | +```javascript |
| 28 | + import ValidateForm from "form-validation-react" |
| 29 | + |
| 30 | +``` |
| 31 | + |
| 32 | + |
| 33 | +Then, wrap your form with <ValidateForm> : |
| 34 | + |
| 35 | +```javascript |
| 36 | +<ValidateForm |
| 37 | + rules={ |
| 38 | + { |
| 39 | + // add the rules here |
| 40 | + } |
| 41 | + } |
| 42 | +> |
| 43 | + <form> |
| 44 | + <input type="text" required /> |
| 45 | + </form> |
| 46 | +</ValidateForm>; |
| 47 | + |
| 48 | +``` |
| 49 | +# Rules |
| 50 | +## Validate Required Inputs |
| 51 | + |
| 52 | +#### To check if all required input fields are filled, use the following rule: |
| 53 | + |
| 54 | +```javascript |
| 55 | +validateRequired: { |
| 56 | + applyOnly:["name","password"] // checking only this inputs are filled |
| 57 | + action: "input_red_border", |
| 58 | + notvalidated: (notFilledInputs) => { |
| 59 | + console.log("Not filled required inputs",notFilledInputs); |
| 60 | + }, |
| 61 | + |
| 62 | +} |
| 63 | + |
| 64 | +``` |
| 65 | + |
| 66 | +If a required input is not filled, the rule will return a callback with an array of the not-filled inputs. You can add the action `input_red_border` to change the border color of the not-filled inputs to red. |
| 67 | + |
| 68 | + |
| 69 | +| Parameter | Type | Value | Optinal | |
| 70 | +| --- | --- | --- | --- | |
| 71 | +| `applyOnly` | `array ` | **Name** of the inputs | `yes` | |
| 72 | +| `action` | `string` | input_red_border | `yes` | |
| 73 | +| `notvalidated` | `callback function` | notFilledInputs | `yes` | |
| 74 | + |
| 75 | +# |
| 76 | +# Example Reactjs Code |
| 77 | + |
| 78 | +Here is an example of how to use the library in a ReactJS component: |
| 79 | + |
| 80 | +```javascript |
| 81 | +import React from "react"; |
| 82 | +import ValidateForm from "form-validation-react"; |
| 83 | + |
| 84 | +function App() { |
| 85 | + return ( |
| 86 | + <div className="App"> |
| 87 | + |
| 88 | + <ValidateForm |
| 89 | + rules={{ |
| 90 | + validateRequired: { |
| 91 | + applyOnly: ["full_name", "email"], |
| 92 | + action: "input_red_border", |
| 93 | + notvalidated: (notFilledInputs) => { |
| 94 | + console.log("Not filled required inputs", notFilledInputs); |
| 95 | + } |
| 96 | + } |
| 97 | + }} |
| 98 | + > |
| 99 | + <form> |
| 100 | + <input required type="text" name="full_name" /> |
| 101 | + <input required type="email" name="email" /> |
| 102 | + <input required type="password" name="password" /> |
| 103 | + <button type="submit">Submit</button> |
| 104 | + </form> |
| 105 | + </ValidateForm> |
| 106 | + |
| 107 | + </div> |
| 108 | + ); |
| 109 | +} |
| 110 | + |
| 111 | +export default App; |
| 112 | + |
| 113 | + |
| 114 | +``` |
0 commit comments