React form validations

npm i react-validations-form

1
2import React, { useState } from 'react'
3
4import Validations, { errorChecker, showError } from 'react-validations-form'
5
6const ELEMENTS = {
7    NAME: 'name',
8    PASSWORD: 'password',
9    EMAIL: 'email',
10    PHONE: 'phone',
11    PIN_CODE: 'pin_code',
12}
13const init_state = {
14    [ELEMENTS.NAME]: "",
15    [ELEMENTS.PASSWORD]: "",
16    [ELEMENTS.EMAIL]: "",
17    [ELEMENTS.PHONE]: "",
18    [ELEMENTS.PIN_CODE]: "",
19}
20
21export const UserForm = () => {
22    // all form states
23    const [form, setForm] = useState(init_state)
24    // error setter 
25    const [error, setError] = useState(init_state)
26
27    const onChange = (e) => {
28        const { name, value, type } = e.target
29        if (type === "number" && isNaN(value)) return false;  // if type is number then string is not allowed. please pass type="number" attribute in input field
30        setForm(prev => ({ ...prev, [name]: value }))
31    }
32
33
34    const onSubmit = () => {
35        let error_obj = Validations(form, rules) //Validations(all states as an object, array of rules) 
36        setError(error_obj)  // set object in setter function
37        let isError = errorChecker(error_obj) // if error then it will return field name 
38        if (isError) return false;
39        //call api here 
40    }
41
42    return <div className='text-start'>
43        <div className='mt-2'>
44            <label>Name</label>
45            <input
46                name={ELEMENTS.NAME}
47                value={form[ELEMENTS.NAME]}
48                onChange={onChange}
49                className='form-control' />
50            {showError(error[ELEMENTS.NAME])}
51        </div>
52        <div className='mt-2'>
53            <label>Password</label>
54            <input
55                name={ELEMENTS.PASSWORD}
56                value={form[ELEMENTS?.PASSWORD]}
57                onChange={onChange}
58                className='form-control' />
59            {showError(error[ELEMENTS.PASSWORD])}
60        </div>
61        <div className='mt-2'>
62            <label>Email</label>
63            <input
64                name={ELEMENTS.EMAIL}
65                value={form[ELEMENTS?.EMAIL]}
66                onChange={onChange}
67                className='form-control'
68            />
69            {showError(error[ELEMENTS.EMAIL])}
70        </div>
71        <div className='mt-2'>
72            <label>Phone</label>
73            <input
74                type="number"
75                name={ELEMENTS.PHONE}
76                value={form[ELEMENTS?.PHONE]}
77                onChange={onChange}
78                className='form-control' />
79            {showError(error[ELEMENTS.PHONE])}
80        </div>
81        <div className='mt-2'>
82            <label>Pin code</label>
83            <input
84                type="number"
85                name={ELEMENTS.PIN_CODE}
86                value={form[ELEMENTS?.PIN_CODE]}
87                onChange={onChange}
88                className='form-control' />
89            {showError(error[ELEMENTS.PIN_CODE])}
90        </div>
91
92        <div className='mt-2'>
93            <button onClick={() => onSubmit()} className='text-secondary'>Submit</button>
94        </div>
95    </div>
96}
97// there are rules for validate the fields 
98const rules = [{
99    field_name: "Name", // label of input box 
100    field_key: ELEMENTS.NAME, // field key 
101    type: 'string',  // value type
102    required: true, // it take boolean values if false then pass on no value (e.g if email optional , phone , pin code like that fields are optional then required then we false so if user fill any wrong value then it checker will check )
103},
104{
105    field_name: "Email",
106    field_key: ELEMENTS.EMAIL,
107    type: 'email',
108    required: true,
109}
110    , {
111    field_name: "Phone",
112    field_key: ELEMENTS.PHONE,
113    type: 'mobile',
114    required: true, 
115},
116{
117    field_name: "Password",
118    field_key: ELEMENTS.PASSWORD,
119    type: 'string',
120    required: true, 
121}, {
122    field_name: "Pin Code",
123    field_key: ELEMENTS.PIN_CODE,
124    type: 'string',
125    required: true,
126}]

Rules configuration explained blow

{ field_name: "Email", field_key: ELEMENTS.EMAIL, type: 'email', required: true, }

Field Config

Rule keys	Rule key types	Rule key descriptions
field_name	Any string (input label name)	field label, for example, field_name: "Name" or field_name: "Phone" and so on.
----	-----	-------
field_key	any input state name, e.g., email	key name in which the value is kept?
----	-----	-------
type	type of value to validate	type of value entered, e.g., email, string, number, mobile, etc.
----	-----	-------
required	boolean	if true, field is required, if false, field is optional, but fill any value and it will validate the value, such as email or phone format, etc.