VA Forms System Core will be a React library hosted in NPM that will allow engineers and designers to easily interact with Forms inside of vets-website.
When a DateField component has some values entered but it still yields an error (i.e. a valid month and year but no day), an error shows on the field. However, the user is still able to click Next Page and proceed, when they should be blocked until they fix the error.
Consideration
This was first noticed when testing card #595. This seems to be an issue with Formik working with the <va-date> web-component. In the DateField's onChange function, if you add this line: helpers.setTouched(true, true); to the top of the function, validation initially appears to work as expected. However, if you use a <DebuggerView>, you can see that the formik value for that field remains null regardless of what values are input into it.
It's possible that validating whether the date is valid is something we'll need to handle. In the vets-website repo, many forms use the CurrentOrPastDate component. In this component, there is a validateCurrentOrPastDate validation function, which calls to a parseISODate function. This function manually splits a dateString into a year, month, and day and verifies that these are all valid. A workaround for our issue may be to add a similar parseISODate function to the validation.ts file in the VAFSC repo, then call parseISODate from the isValidDate function that Formik uses for validation in the <DateField> component.
Description
When a DateField component has some values entered but it still yields an error (i.e. a valid
monthandyearbut noday), an error shows on the field. However, the user is still able to clickNext Pageand proceed, when they should be blocked until they fix the error.Consideration
This was first noticed when testing card #595. This seems to be an issue with Formik working with the
<va-date>web-component. In the DateField'sonChangefunction, if you add this line:helpers.setTouched(true, true);to the top of the function, validation initially appears to work as expected. However, if you use a<DebuggerView>, you can see that the formik value for that field remains null regardless of what values are input into it.It's possible that validating whether the date is valid is something we'll need to handle. In the
vets-websiterepo, many forms use theCurrentOrPastDatecomponent. In this component, there is avalidateCurrentOrPastDatevalidation function, which calls to aparseISODatefunction. This function manually splits a dateString into a year, month, and day and verifies that these are all valid. A workaround for our issue may be to add a similarparseISODatefunction to thevalidation.tsfile in the VAFSC repo, then callparseISODatefrom theisValidDatefunction that Formik uses for validation in the<DateField>component.Acceptance Criteria