1.0.1 • Published 5 years ago
@hookstapose/use-form-validation v1.0.1
useFormValidation
This hook lets you set rules for every input in your form and validate onChange
and on form submit
, also you can setup a callback when a field success validating or when it does not validate correctly.
Installation
Install with yarn:
yarn add @react-hook-utils/use-form-validation
Install with npm:
npm install @react-hook-utils/use-form-validation
API
import {useFormValidation} from '@react-hook-utils/use-form-validation'
const {form, fields, resetFields, manuallySetField} = useFormValidation(options)
options
: Object containing hook configuration
form
: Objectform options
onSubmit
: Functionsubmit callback when all fields success
fields
: (Required) Objectfields configuration
inputName
: ObjectinputName field configuration
value
: Stringinput initial value
rules
: (Required) Function[]input rules
(value: String) => void
Functioninput rule, it must throw an error with the error message when the value is wrong
onSuccess
: Functioninput callback on successful validation
onError
: Functioninput callback on erroneous validation
isRequired
: Booleanindicates if the field is required to submit the form
hook return
: Object containing hook return
form
: Objectform props to spread
noValidate
: truedisables form validate api
onSubmit
: Functionform's submit function
fields
: Objectinputs properties and status
inputName
: Object
input
: ObjectinputName props
onChange
: FunctioninputName onChange function
value
: Stringcurrent inputName value
info
: Object `inputName
status
: 'standard' | 'success' | 'error'input validation status
message
: stringinput error message
resetFields
: Functionresets all fields values to ''
manuallySetField
: (inputName: String, value: String) => voidsets the inputName value
Usage
import React from 'react'
import {useFormValidation} from '@react-hook-utils/use-form-validation'
function shouldContainLowerZ(value) {
if (value.indexOf('z') !== -1) return
throw new Error('The field must contain a Z letter')
}
function fieldLength(length) {
return (value) => {
if (value.length >= length) return
throw new Error(`The field must have a length of ${length}`)
}
}
function Example() {
const userNameLength = fieldLength(10)
const passwordLength = fieldLength(8)
const {form, fields} = useFormValidation({
fields: {
username: {
isRequired: true,
rules: [
shouldContainLowerZ,
usernameLength
]
},
password: {
isRequired: true,
rules: [
passwordLength
]
}
}
})
const usernameField = fields['username']
const passwordField = fields['password']
return (
<form {...form}>
<label htmlFor='username'>Username</label>
<input name='username' id='username' {...usernameField.input}/>
{usernameField.info.message && <p>{usernameField.info.message}</p>}
<label htmlFor='password'>Password</label>
<input name='password' id='password' {...passwordField.input}/>
{passwordField.info.message && <p>{passwordField.info.message}</p>}
<button type='submit'>Login</button>
</form>
)
}
1.0.1
5 years ago