CODEWITHSUNDEEP
redux-form
user1885523
user1885523

Reputation: 167

Async validate single redux form field, but not on submit

Question

How can one build a async validation on a single form field that also can trigger filed level errors, but without using a asyncValidation that also triggers onSubmit?

Background to question

I have a Redux form where the user can choose to:

a) Input adress details by hand

b) Fill in their social security number and fetch all details from a API and get the redux form fields prefilled (wohoo, time saved!)

c) Being 100% anonymous by checking a checkbox which removed all personal details fields.

Given this kind of setup a asyncValidator that triggers onSubmit and onBlur seems tricky, i don't want them to trigger more than once if a get the desired details and the form get pre-filled. But if user submits a invalid social security number I want to trigger a field error.

Upvotes: 1

Views: 846

Answers (1)

Eliran
Eliran

Reputation: 355

if you just want to validate a single field, you can pass a prop validate with an array of validation functions, that will return false if its valid, and a string error if invalid based on your logic. and will prevent submission, or will show an error on submittion.

const required = (value) => (value ? false : 'Required')
const isSSN = (value) => (willBeTrueIfSSN ? false : 'Invalid SSN')
<Field name="ssn" validate={[isSSN, required]} {...rest} />

some good examples in the redux-form docs: https://redux-form.com/7.2.3/examples/fieldlevelvalidation/

Upvotes: 1

Related Questions