-
Notifications
You must be signed in to change notification settings - Fork 1
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
Control field validation behaviour #74
Conversation
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.
There was a problem hiding this 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: '', |
There was a problem hiding this comment.
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
?
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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!
- These are stories for the raw
TextField
component, which is rendered by the Formiotextfield
,email
... etc. - Any form field rendered with Formik requires at least a
name
parameter - The
name
prop is specified as arg on L89. For this test/story purpose, the name isvalidateOnBlur
. Effectively resulting in<input type="text" name="validateOnBlur" />
- 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. - So, it doesn't have anything to do with the actual validation, it's just an illustrative form field name.
There was a problem hiding this comment.
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} |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahh check, got it
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: