react-use-form-validate
Super customizable validation library for forms in react
Install
npm install --save react-use-form-validate
Usage
import React from 'react'
import { useValidation } from "react-use-form-validate"
const validationFunction = (value) => {
return value === 'abc';
}
const App = () => {
let config = {
fields: {
email: {
isRequired: { message: 'Email is Required' },
isEmail: { message: 'Please enter a valid Email address' }
},
password: {
isRequired: { message: 'Password is Required' }
},
maxField: {
max: {
message: 'Max size exceeded',
length: 5
}
},
minField: {
min: {
message: 'Min size not fulfilled',
length: 5
},
},
equalField: {
equals: {
message: 'Does not match expected value',
value: 'React'
}
},
regexField: {
pattern: {
message: 'You can only enter alphabets in this field',
regex: /^[A-Za-z]+$/
}
},
validatorField: {
customValidator: {
message: 'Validation failed by validator function',
validator: validationFunction,
}
},
},
onSubmit: context => {
if (context.isFormValid) {
console.log('Form is valid and ready to be submitted')
} else {
console.log('Form is valid and ready to be submitted')
}
},
showErrors: 'blur'
}
const { getFieldProps, getFormProps, errors } = useValidation(config)
return (
<form {...getFormProps()}>
<input
{...getFieldProps('email')}
type='text'
placeholder='Email'
/>
{
errors.email &&
<div>
<p>
{/* {errors.email ? errors.email : submittedErrors.email} */}
{errors.email}
</p>
</div>
}
<div>
<input
{...getFieldProps('password')}
type='password'
placeholder='Password'
/>
{
errors.password &&
<div>
<p>
{errors.password}
</p>
</div>
}
</div>
<div>
<input
{...getFieldProps('maxField')}
type='text'
placeholder='Max 5 char'
/>
{
errors.maxField &&
<div>
<p>
{errors.maxField}
</p>
</div>
}
</div>
<div>
<input
{...getFieldProps('minField')}
type='text'
placeholder='min 5 char'
/>
{
errors.minField &&
<div>
<p>
{errors.minField}
</p>
</div>
}
</div>
<div>
<input
{...getFieldProps('equalField')}
type='text'
placeholder='Enter react'
/>
{
errors.equalField &&
<div>
<p>
{errors.equalField}
</p>
</div>
}
</div>
<div>
<input
{...getFieldProps('regexField')}
type='text'
placeholder='Enter only alphabets in this field'
/>
{
errors.regexField &&
<div>
<p>
{errors.regexField}
</p>
</div>
}
</div>
<div>
<input
{...getFieldProps('validatorField')}
type='text'
placeholder='Only accepted value is: "abc"'
/>
{
errors.validatorField &&
<div>
<p>
{errors.validatorField}
</p>
</div>
}
</div>
<div>
<button
type='submit'
>
SUBMIT
</button>
</div>
</form >
)
}
export default App
License
MIT © himanshubhardwaz
This hook is created using create-react-hook.