Pattern for validation across fields #545
Comments
Validation across fields being a concern of a parent node solves the problem, "where will the validation live?" For example, if the birthdate is invalid (e.g., The simplest answer is at a parent node. I recommend having a data structure like this:
And that way, you can make a sub-form like this: import { Form, Control } from 'react-redux-form';
const isOver18 = (day, month, year) => { ... };
const BirthDate = ({forModel}) => (
<Form
model={`${forModel}.birth`}
component="div"
validators={{
'': ({day, month, year}) => isOver18(day, month, year),
}}
>
<Control model=".day" placeholder="Day" />
<Control model=".month" placeholder="Month" />
<Control model=".year" placeholder="Year" />
</Form>
);
export default BirthDate; and use it anywhere like this: import BirthDate from './path/to/BirthDate';
// in existing form
<Form model="user">
<Control model=".firstName" />
<Control model=".lastName" />
<BirthDate forModel="user" />
<button>Submit!</button>
</Form> Alternatively, you can just have a custom component that renders all 3 fields as one single value, and then validate it just as you would validate any other individual field. Does that solve your use-case? |
We had a few problems implementing the form as you describe it.
In this case we get an error Is it possible to use nested form with a partial model? Are we doing something wrong? |
Hey @davidkpiano, Have you had a chance to look at my follow up question above? Is it possible to use nested form with a partial model? |
Ah, unfortunately I overlooked that. At the moment, resolving models is not supported for For now, I updated my answer above. You can create a higher-ordered component: const BirthDate = ({forModel}) => (
<Form
model={`${forModel}.birth`}
// ... etc. And then use it inside your |
Update: As of 1.4.1 you can now use |
Could you add an example about the validation with Fieldset to the documentation? I somehow cannot get it to work. |
Hello,
We're wondering if you had any patterns to do validation across a number of fields (other than doing form level validation). The example we're using is capturing date of birth across three fields (day, month, year). Each field has its own validation, but some (e.g. is it a valid date? are they over 18?) need to be done across all fields.
We would like to avoid doing this at the form level as we want to create a self contained re-usable component (i.e.
<DateOfBirthField />
)Ideally when the parent form is submitted, all the validation needs to be triggered automatically.
The text was updated successfully, but these errors were encountered: