Form Validation
Validation is an important part for most forms.
There are two ways to perform validation.
Global Validation
We are able to validate the whole form by passing a validate
function to our wrapping Form component.
This is primarily useful for special cross-validation cases where multiple field values are validated together.
Example
import { Form } from 'react-controlled-form'
// e.g. if we do not ship to Berlin, Germany
function validate({ data }) {
return data.country.value !== 'Germany' ||
data.city.value !== 'Berlin'
}
// Usage
<Form formId="address" validate={validate} render={...} />
Per-Field Validation
Although we are already able to validate the whole form, it is often much simpler and more intuitive to allocate validation with each field.
On User Input
The most common way is to validate on user input.
Example
import { Field } from 'react-controlled-form'
// only allow real positive numbers
function validate(value) {
return value.match(/^\d+$/) !== null && parseInt(value) > 0
}
function Input({ value, isValid, updateField }) {
function onChange(e) {
const nextValue = e.target.value
updateField({
isValid: validate(nextValue),
nextValue
})
}
return (
<input
value={value}
onChange={onChange}
style={{
// simple way to indicate field validation
color: isValid ? 'green' : 'red'
}}
/>
)
}
// Usage
<Field fieldId='age' render={Input} />
On Blur
Another very common way is to trigger validation as soon as the user leaves the input field. This can be done using the built-in HTML onBlur
event.
We will utilize the isTouched
indicator to only show visible validation on blur. As react-controlled-form automatically sets isTouched
to true
as on updateField
, we have to force the opposite.
In addition, you could also use the
onFocus
-event to setisTouched
tofalse
again.
Example
import { Field } from 'react-controlled-form'
// only allow real positive numbers
function validate(value) {
return value.match(/^\d+$/) !== null && parseInt(value) > 0
}
function Input({ value, isValid, updateField }) {
function onChange(e) {
const nextValue = e.target.value
updateField({
isValid: validate(nextValue),
// forcing isTouched: false
isTouched: false,
nextValue
})
}
function onBlur(e) {
updateField({
isTouched: true
})
}
return (
<input
value={value}
onChange={onChange}
onBlur={onBlur}
style={{
// if its touched show the validation color
// if not just remain black
color: isTouched ? (isValid ? 'green' : 'red') : 'black'
}}
/>
)
}
// Usage
<Field fieldId='age' render={Input} />
On Submit
The final common validation pattern probably is on Form submit.
Example
Coming soon.