react-use-form-validate

Super customizable validation library for forms in react

Install

1npm install --save react-use-form-validate

Usage

1import React from 'react'
2import { useValidation } from "react-use-form-validate"
3
4const validationFunction = (value) => {
5  return value === 'abc';
6}
7
8const App = () => {
9  let config = {
10    fields: {
11      email: {
12        isRequired: { message: 'Email is Required' },
13        isEmail: { message: 'Please enter a valid Email address' }
14      },
15      password: {
16        isRequired: { message: 'Password is Required' }
17      },
18      maxField: {
19        max: {
20          message: 'Max size exceeded',
21          length: 5
22        }
23      },
24      minField: {
25        min: {
26          message: 'Min size not fulfilled',
27          length: 5
28        },
29      },
30      equalField: {
31        equals: {
32          message: 'Does not match expected value',
33          value: 'React'
34        }
35      },
36      regexField: {
37        pattern: {
38          message: 'You can only enter alphabets in this field',
39          regex: /^[A-Za-z]+$/
40        }
41      },
42      validatorField: {
43        customValidator: {
44          message: 'Validation failed by validator function',
45          validator: validationFunction,
46        }
47      },
48    },
49    onSubmit: context => {
50      if (context.isFormValid) {
51        console.log('Form is valid and ready to be submitted')
52      } else {
53        console.log('Form is valid and ready to be submitted')
54      }
55    },
56    showErrors: 'blur'
57  }
58
59  const { getFieldProps, getFormProps, errors } = useValidation(config)
60
61  return (
62    <form {...getFormProps()}>
63      <input
64        {...getFieldProps('email')}
65        type='text'
66        placeholder='Email'
67      />
68      {
69        errors.email &&
70        <div>
71          <p>
72            {/* {errors.email ? errors.email : submittedErrors.email} */}
73            {errors.email}
74          </p>
75        </div>
76      }
77
78      <div>
79        <input
80          {...getFieldProps('password')}
81          type='password'
82          placeholder='Password'
83        />
84        {
85          errors.password &&
86          <div>
87            <p>
88              {errors.password}
89            </p>
90          </div>
91        }
92      </div>
93
94      <div>
95        <input
96          {...getFieldProps('maxField')}
97          type='text'
98          placeholder='Max 5 char'
99        />
100        {
101          errors.maxField &&
102          <div>
103            <p>
104              {errors.maxField}
105            </p>
106          </div>
107        }
108      </div>
109
110      <div>
111        <input
112          {...getFieldProps('minField')}
113          type='text'
114          placeholder='min 5 char'
115        />
116        {
117          errors.minField &&
118          <div>
119            <p>
120              {errors.minField}
121            </p>
122          </div>
123        }
124      </div>
125
126      <div>
127        <input
128          {...getFieldProps('equalField')}
129          type='text'
130          placeholder='Enter react'
131        />
132        {
133          errors.equalField &&
134          <div>
135            <p>
136              {errors.equalField}
137            </p>
138          </div>
139        }
140      </div>
141
142      <div>
143        <input
144          {...getFieldProps('regexField')}
145          type='text'
146          placeholder='Enter only alphabets in this field'
147        />
148        {
149          errors.regexField &&
150          <div>
151            <p>
152              {errors.regexField}
153            </p>
154          </div>
155        }
156      </div>
157
158      <div>
159        <input
160          {...getFieldProps('validatorField')}
161          type='text'
162          placeholder='Only accepted value is: "abc"'
163        />
164        {
165          errors.validatorField &&
166          <div>
167            <p>
168              {errors.validatorField}
169            </p>
170          </div>
171        }
172      </div>
173
174      <div>
175        <button
176          type='submit'
177        >
178          SUBMIT
179        </button>
180      </div>
181    </form >
182  )
183}
184
185export default App

License

MIT © himanshubhardwaz

This hook is created using create-react-hook.