Reusable form validators for formik
Reusable field-level form validators for formik
, support i18n
npm
$ npm install formik-validators
yarn
$ yarn add formik-validators
// myModule.form.ts
import validator, { required, minLength, maxLength } from 'formik-validators'
const InnerForm = props => {
return (
<View>
<TextInput
{...getFieldProps(props, 'phoneNumber')}
name={'phoneNumber'}
placeholder={'Enter your phone number'}
></TextInput>
</View>
)
}
const MyForm = withFormik({
validate: validator({
phoneNumber: [
required('errors.phone.required'),
minLength(8)('errors.phone.minLength'),
maxLength(10)('errors.phone.maxLength')
]
})
})(InnerForm)
By default, the translate function would return the same string that you give it
translateFn = (term, params) => term
But you can create your own translate function.
// validator.ts
import I18n from 'i18n-js'
import validator, { setTranslateFn } from 'formik-validators'
setTranslateFn((term, params) => I18n.t(term, params))
export default validator
// ../../forms/index.ts
export { default as validator } from './validator'
export * from './forms.components' // i.e TextInput, Checkbox, TextArea,...
// myModule.form.ts
import { validator, TextInput } from '../../forms'
import { required, minLength, getFieldProps } from 'formik-validators'
...
// locales/en.ts
export default {
'errors.phone.required': 'Phone number is required',
'errors.phone.minLength': 'Phone number must be at least {{length}} digits',
'errors.phone.minLength': 'Please enter a maximum of {{length}} digits'
}
formik-validators
comes with some basics validation rules, but it’s not enough for building a real world app.
Despite that, it is easy for adding your custom rules.
Example: add a new rule to check the exact length
const exactLength = (length: number, errorKey: string): RuleFn => ({
value, values, props
}: RuleInput) => {
if (isNil(value)) return
if (value.length !== length) {
return t(errorKey, { length })
}
}
MIT