Skip to content

Commit ea79e39

Browse files
gokulakannantgokulakannant
authored
Merge pull request #63 from gokulakannant/develop
Develop
2 parents ea46c51 + 365674e commit ea79e39

20 files changed

+11656
-2888
lines changed

‎CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,17 @@ All notable changes to React Form Input Validation APIs will be documented in th
88

99
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
1010

11+
## [2.1.0] - 02/08/2022
12+
13+
### Added
14+
15+
- Introduced the hook support
16+
- [`useFormInputValidation`](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/functions/Hooks.useFormInputValidation.html)
17+
18+
### Fixed
19+
20+
- Form validation with React Functional Component and useState Hooks - [#41](https://github.com/gokulakannant/react-form-input-validation/issues/41)
21+
1122
## [2.0.4] - 07/08/2020
1223

1324
### Fixed

‎README.md

Lines changed: 184 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,18 @@
44
[![Build Status](https://api.travis-ci.org/gokulakannant/react-form-input-validation.png?branch=master)](https://travis-ci.org/gokulakannant/react-form-input-validation)
55
[![GitHub license](https://img.shields.io/github/license/gokulakannant/react-form-input-validation.svg)](https://github.com/gokulakannant/react-form-input-validation/blob/master/LICENSE.md) [![Join the chat at https://gitter.im/react-form-input-validation/community](https://badges.gitter.im/react-form-input-validation/community.svg)](https://gitter.im/react-form-input-validation/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
66

7-
A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms. It uses the [Controlled Components](https://reactjs.org/docs/forms.html#controlled-components) approach for validation.
7+
A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms. It uses the both [Controlled Components](https://reactjs.org/docs/forms.html#controlled-components) and React Hooks approach for validation.
88

99
* [Available Rules](Rules.md)
1010
* [Documentation](https://gokulakannant.github.io/react-form-input-validation/index.html)
11-
* [Demo](https://codesandbox.io/s/react-form-input-validation-demp-hyuju?fontsize=14&hidenavigation=1&theme=dark) (in CodeSandbox)
11+
* [Demo - Class Components](https://codesandbox.io/s/react-form-input-validation-demp-hyuju?fontsize=14&hidenavigation=1&theme=dark) (in CodeSandbox)
12+
* [Demo - Functional Components](https://codesandbox.io/s/useforminputvalidation-kn0xe3) (in CodeSandbox)
1213

1314
## Why use react-form-input-validation?
1415

1516
* JQuery Free.
1617
* Auto Controlled State.
18+
* Able to use in both State and Stateless components.
1719
* Compatible with libraries like [Material UI](https://material-ui.com/), and etc.
1820
* Readable and declarative validation rules which is inspired by laravel framework.
1921
* Error messages with multilingual support.
@@ -37,7 +39,9 @@ Using [yarn](https://yarnpkg.com/en/) as your package manager.
3739

3840
## Usage
3941

40-
A example form has given below. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/classes/reactforminputvalidation.html).
42+
### Class component
43+
44+
The given below example is for Class component. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/classes/ReactFormInputValidation.ReactFormInputValidation.html).
4145

4246
```js
4347
import React from "react";
@@ -124,6 +128,183 @@ class ValidationForm extends React.Component {
124128
}
125129
```
126130

131+
### Functional Component
132+
133+
The given below example is for Functional component with the usage of hooks. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/functions/Hooks.useFormInputValidation.html).
134+
135+
#### Example 1
136+
137+
```js
138+
import React from "react";
139+
import { useFormInputValidation } from "react-form-input-validation";
140+
141+
const ValidationForm = () => {
142+
const [fields, errors, form] = useFormInputValidation({
143+
customer_name: "",
144+
email_address: "",
145+
phone_number: "",
146+
}, {
147+
customer_name: "required",
148+
email_address: "required|email",
149+
phone_number: "required|numeric|digits_between:10,12"
150+
});
151+
152+
const onSubmit = async (event) => {
153+
const isValid = await form.validate(event);
154+
if (isValid) {
155+
// console.log(fields, errors);
156+
// Perform api call here
157+
}
158+
}
159+
160+
return <div style={{maxWidth: "600px", margin: "0 auto"}}>
161+
<h3>React Form Input Validation - validate</h3>
162+
<form
163+
className="myForm"
164+
noValidate
165+
autoComplete="off"
166+
onSubmit={onSubmit}
167+
>
168+
<p>
169+
<label>
170+
Name
171+
<input
172+
type="text"
173+
name="customer_name"
174+
onBlur={form.handleBlurEvent}
175+
onChange={form.handleChangeEvent}
176+
value={state.fields.customer_name}
177+
/>
178+
</label>
179+
<label className="error">
180+
{errors.customer_name
181+
? errors.customer_name
182+
: ""}
183+
</label>
184+
</p>
185+
186+
<p>
187+
<label>
188+
Phone
189+
<input
190+
type="tel"
191+
name="phone_number"
192+
onBlur={form.handleBlurEvent}
193+
onChange={form.handleChangeEvent}
194+
value={fields.phone_number}
195+
/>
196+
</label>
197+
<label className="error">
198+
{errors.phone_number
199+
? errors.phone_number
200+
: ""}
201+
</label>
202+
</p>
203+
204+
<p>
205+
<label>
206+
Email
207+
<input
208+
type="email"
209+
name="email_address"
210+
onBlur={form.handleBlurEvent}
211+
onChange={form.handleChangeEvent}
212+
value={fields.email_address}
213+
/>
214+
</label>
215+
<label className="error">
216+
{errors.email_address
217+
? errors.email_address
218+
: ""}
219+
</label>
220+
</p>
221+
222+
<p>
223+
<button type="submit">Submit</button>
224+
</p>
225+
</form>
226+
</div>
227+
}
228+
229+
export default ValidationForm;
230+
```
231+
232+
#### Example 2
233+
234+
```js
235+
import React from "react";
236+
import { useFormInputValidation } from "react-form-input-validation";
237+
238+
const ValidationForm2 = () => {
239+
const [fields, errors, form] = useFormInputValidation({
240+
email_address: "",
241+
password: "",
242+
}, {
243+
email_address: "required|email",
244+
password: "required"
245+
});
246+
247+
useEffect(() => {
248+
if (form.isValidForm) {
249+
// console.log(fields, errors, form);
250+
// Perform api call here
251+
}
252+
}, [])
253+
254+
return <div style={{maxWidth: "600px", margin: "0 auto"}}>
255+
<h3>React Form Input Validation - usage of form.isValidForm</h3>
256+
<form
257+
className="myForm"
258+
noValidate
259+
autoComplete="off"
260+
onSubmit={form.handleSubmit}
261+
>
262+
<p>
263+
<label>
264+
Email
265+
<input
266+
type="email"
267+
name="email_address"
268+
onBlur={form.handleBlurEvent}
269+
onChange={form.handleChangeEvent}
270+
value={fields.email_address}
271+
/>
272+
</label>
273+
<label className="error">
274+
{errors.email_address
275+
? errors.email_address
276+
: ""}
277+
</label>
278+
</p>
279+
280+
<p>
281+
<label>
282+
Password
283+
<input
284+
type="tel"
285+
name="password"
286+
onBlur={form.handleBlurEvent}
287+
onChange={form.handleChangeEvent}
288+
value={fields.password}
289+
/>
290+
</label>
291+
<label className="error">
292+
{errors.password
293+
? errors.password
294+
: ""}
295+
</label>
296+
</p>
297+
298+
<p>
299+
<button type="submit">Submit</button>
300+
</p>
301+
</form>
302+
</div>
303+
}
304+
305+
export default ValidationForm2;
306+
```
307+
127308
## Custom attribute name
128309

129310
Refer the below example to override the attribute name,

‎VERSIONS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ The most recent version is recommended in production.
88

99
|Versions|Documents|Releases|
1010
|--------|---------|--------|
11+
|v2.1.0|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.1.0)|
1112
|v2.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.1)|
1213
|v2.0.0|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.0)|
1314
|v1.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v1.0.1/index.html)| |

0 commit comments

Comments
 (0)