Let formik do the default validateOnChange

falling-fruit · Dec 26, 2024 · 4250ea8 · 4250ea8
1 parent 899ee2f
commit 4250ea8
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 21 deletions.
diff --git a/src/components/form/LocationForm.js b/src/components/form/LocationForm.js
@@ -223,16 +223,12 @@ export const LocationForm = ({ editingId, initialValues }) => {
     <StyledForm>
       <Formik
         validate={validateLocation}
-        validateOnChange={false}
         initialValues={mergedInitialValues}
         validateOnMount
         onSubmit={isLoggedIn ? handleSubmit : onPresubmit}
       >
         {(formikProps) => {
           const { isSubmitting, isValid, dirty } = formikProps
-          const isUploadingPhotos = formikProps.values.review.photos.some(
-            (p) => p.isUploading,
-          )
           const formDirty = dirty || positionDirty
 
           return (
@@ -254,9 +250,7 @@ export const LocationForm = ({ editingId, initialValues }) => {
                   Cancel
                 </Button>
                 <Button
-                  disabled={
-                    isSubmitting || !isValid || !formDirty || isUploadingPhotos
-                  }
+                  disabled={isSubmitting || !isValid || !formDirty}
                   type="submit"
                 >
                   {isSubmitting ? 'Submitting' : t('glossary.submit')}

diff --git a/src/components/form/ReviewForm.js b/src/components/form/ReviewForm.js
@@ -192,26 +192,20 @@ export const ReviewForm = ({
     <StyledForm>
       <Formik
         validate={({ review }) => validateReview(review)}
-        validateOnChange={false}
         initialValues={initialValues}
         validateOnMount
         onSubmit={isLoggedIn ? handleSubmit : onPresubmit}
       >
         {(formikProps) => {
           const { isSubmitting, isValid, dirty } = formikProps
-          const isUploadingPhotos = formikProps.values.review.photos.some(
-            (p) => p.isUploading,
-          )
 
           return (
             <Form>
               <ReviewStep standalone hasHeading={editingId == null} />
               <ProgressButtons>
                 <div style={{ textAlign: editingId ? 'center' : 'left' }}>
                   <Button
-                    disabled={
-                      isSubmitting || !isValid || !dirty || isUploadingPhotos
-                    }
+                    disabled={isSubmitting || !isValid || !dirty}
                     type="submit"
                   >
                     {isSubmitting ? 'Submitting' : t('glossary.submit')}

diff --git a/src/utils/form.js b/src/utils/form.js
@@ -79,16 +79,11 @@ export const reviewToForm = ({
 const isEveryPhotoUploaded = (photos) =>
   photos.every((photo) => !photo.isUploading)
 
-const validateLocationStep = ({ types }) => {
+export const validateLocation = ({ review, ...location }) => {
   const errors = {}
-  if (types.length === 0) {
+  if (location.types.length === 0) {
     errors.types = true
   }
-  return errors
-}
-
-export const validateLocation = ({ review, ...location }) => {
-  const errors = validateLocationStep(location)
 
   if (!isEmptyReview(review)) {
     Object.assign(errors, validateReview(review))