Skip to content

Commit d26d0d4

Browse files
committed
added the npm documentation
1 parent 33f790c commit d26d0d4

File tree

1 file changed

+114
-1
lines changed

1 file changed

+114
-1
lines changed

README.md

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,114 @@
1-
## form-validation-react
1+
2+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](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

Comments
 (0)