Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Control field validation behaviour #74

Merged
merged 7 commits into from
Mar 11, 2025

Conversation

sergei-maertens
Copy link
Member

@sergei-maertens sergei-maertens commented Mar 8, 2025

Resolves #69 (mostly)

This switches the validation behaviour to be per-field (until you submit the form as a whole), and triggers validation on blur of a field.

TODO:

  • TextField (handles email, bsn, phone number, textfield)
  • Radio
  • DateField (input group)

Added story + test to document onBlur behaviour of TextField component.
... but only when all three parts of the date have been entered, as
anything less is by definition invalid. This does imply that the field
does not clear the error message whenever one of the inputs is cleared,
as we can't tell the difference between correcting an input error vs
someone entering an incomplete date.
@sergei-maertens sergei-maertens marked this pull request as ready for review March 10, 2025 07:45
Copy link

@robinmolen robinmolen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One question about the storybook config, but if it works everything is fine

parameters: {
formik: {
initialValues: {
validateOnBlur: '',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't it validateOnBlur: true?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formik doesn't seem involved with the validating. So, should this parameter just be removed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay - I understand the confusion!

  1. These are stories for the raw TextField component, which is rendered by the Formio textfield, email... etc.
  2. Any form field rendered with Formik requires at least a name parameter
  3. The name prop is specified as arg on L89. For this test/story purpose, the name is validateOnBlur. Effectively resulting in <input type="text" name="validateOnBlur" />
  4. So, the formik context/parameters from the story expect some initialValues, which is keyed by the field names. Hence, {validateOnBlur: ''} - the field has an empty string as value initially.
  5. So, it doesn't have anything to do with the actual validation, it's just an illustrative form field name.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah hahaha, okay yeah that makes sense 😅

return (
<Formik
initialValues={initialValues}
initialErrors={initialErrors}
initialTouched={initialTouched}
enableReinitialize
onSubmit={async values => onSubmit(values)}
validateOnBlur={false}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this not be set by the context parameters?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've hardcoded them to reflect the actual implementation because enabling this validates the whole form rather than just the field that's touched.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh check, got it

@sergei-maertens sergei-maertens merged commit 9454182 into main Mar 11, 2025
7 checks passed
@sergei-maertens sergei-maertens deleted the feature/69-control-field-validation-behaviour branch March 11, 2025 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Decide on validation behaviour
2 participants