mobx-react-form
mobx-react-form copied to clipboard
Validate at lease one checkbox checked
Hi, I was wondering how to setup validation so that at least one checkbox in a group needs to be checked. Would I use nested fields for this?
name: 'group',
label: 'Group',
fields: [{
name: 'option1',
label: 'option 1',
type: 'checkbox',
}, {
name: 'option2',
label: 'option 2',
type: 'checkbox',
}, {
name: 'option3',
label: 'option 3',
type: 'checkbox',
}],
Any help appreciated
I'd suggest looking into one or more of the following:
- Custom JS Validators: https://foxhound87.github.io/mobx-react-form/docs/validation/modes/vjf-custom.html
- onChange/onToggle Hooks: https://foxhound87.github.io/mobx-react-form/docs/events/event-handlers.html
- observe/intercept: https://foxhound87.github.io/mobx-react-form/docs/extra/mobx-events.html
I used the observers object to validate one field when a different field changes.
An alternative is doing it in onSubmit. inside the function, get access to the form object, do your validations, and if it's invalid you can call form.invalidate('At least one checkbox must be selected')