1

I have a React form created with Formik & Yup and I have a little problem with the submit button.

The error message will be displayed if I try to click on an input field and leave. If an error message is displayed and I click the "Save" button, all the error messages will disappear, instead of showing all my empty inputs.

This is my yup validation schema:

export const refillSchema = object({
date: date().required('Date is required'),
refillType: string().required('Refill type is required'),
kilometers: number().required('Kilometers is required').min(0, 'Kilometers must be at least 0'),
price: number().required('Price is required').min(0, 'Price must be at least 0'),
liters: number().required('Liters is required').min(0, 'Liters must be at least 0'),
kWh: number().required('KWh is required').min(0, 'KWh must be at least 0')
})

And this is my component:

import React from 'react';
import { ChevronLeftIcon } from '@heroicons/react/20/solid';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { refillInitialValues } from '../../../utils/constants';
import { refillSchema } from '../../../utils/yupSchemas';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default function HandleFuelConsumption({ refill, electricVehicle, resetHandleVehicle }) 
{
return (
<div>
  <Formik
    initialValues={refill || refillInitialValues}
    validationSchema={refillSchema}
    onSubmit={(values, { resetForm }) => {
      const { date, kilometers, refillType, price, liters, kWh } = values;

      console.log(date, kilometers, refillType, price, liters, kWh);

      // Handle form submission
      // For example, you can make an API call or update the state

      resetForm(); // Reset the form after successful submission
    }}
  >
    {({ errors, touched, setFieldValue }) => (
      <Form>
        <div id="actionsBar" className="p-2 border-b-2">
          <div className="flex justify-between">
            <div className="flex items-center cursor-pointer text-[#3300FF]" onClick={resetHandleVehicle}>
              <ChevronLeftIcon className="w-[25px] h-auto" />
              <p>Back</p>
            </div>
            <button type="submit" className="flex items-center cursor-pointer text-white blue-button hover:opacity-80">
              <p>Save</p>
            </button>
          </div>
        </div>
        <div className="flex flex-wrap p-2 gap-x-6">
          <div>
            <label htmlFor="date" className="block text-sm font-medium text-gray-700">
              Date
            </label>
            <Field name="date">
              {({ field }) => (
                <DatePicker
                  id="date"
                  selected={field.value}
                  onChange={(date) => setFieldValue('date', date)}
                  className={`${
                    errors.date && touched.date ? 'border-red-500' : ''
                  } cursor-default block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-primary focus:outline-none focus:ring-primary-hover sm:text-sm`}
                  showTimeSelect
                  dateFormat="yyyy-MM-dd HH:mm:ss"
                  timeFormat="HH:mm:ss"
                />
              )}
            </Field>
            <ErrorMessage name="date" component="p" className="text-red-500 text-xs italic" />
          </div>
          <div>
            <label htmlFor="kilometers" className="block text-sm font-medium text-gray-700">
              Kilometers
            </label>
            <div className="mt-1">
              <Field
                id="kilometers"
                name="kilometers"
                type="number"
                min="0"
                className={`${
                  errors.kilometers && touched.kilometers ? 'border-red-500' : ''
                } block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-primary focus:outline-none focus:ring-primary-hover sm:text-sm`}
              />
            </div>
            <ErrorMessage name="kilometers" component="p" className="text-red-500 text-xs italic" />
          </div>
          <div>
            <label htmlFor="refillType" className="block text-sm font-medium text-gray-700">
              Refill Type
            </label>
            <Field
              as="select"
              id="refillType"
              name="refillType"
              className={`${
                errors.refillType && touched.refillType ? 'border-red-500' : ''
              } min-w-[100px] mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-primary focus:outline-none focus:ring-primary-hover sm:text-sm`}
            >
              <option value="Full">Full</option>
              <option value="Partial">Partial</option>
            </Field>
            <ErrorMessage name="refillType" component="p" className="text-red-500 text-xs italic" />
          </div>
        </div>
        <div className="flex flex-wrap p-2 gap-x-6">
          <div>
            <label htmlFor="price" className="block text-sm font-medium text-gray-700">
              Price
            </label>
            <div className="mt-1">
              <Field
                id="price"
                name="price"
                type="number"
                min="0"
                className={`${
                  errors.price && touched.price ? 'border-red-500' : ''
                } block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-primary focus:outline-none focus:ring-primary-hover sm:text-sm`}
              />
            </div>
            <ErrorMessage name="price" component="p" className="text-red-500 text-xs italic" />
          </div>
          {electricVehicle ? (
            <div>
              <label htmlFor="kWh" className="block text-sm font-medium text-gray-700">
                KWh
              </label>
              <div className="mt-1">
                <Field
                  id="kWh"
                  name="kWh"
                  type="number"
                  min="0"
                  className={`${
                    errors.kWh && touched.kWh ? 'border-red-500' : ''
                  } block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-primary focus:outline-none focus:ring-primary-hover sm:text-sm`}
                />
              </div>
              <ErrorMessage name="kWh" component="p" className="text-red-500 text-xs italic" />
            </div>
          ) : (
            <div>
              <label htmlFor="liters" className="block text-sm font-medium text-gray-700">
                Liters
              </label>
              <div className="mt-1">
                <Field
                  id="liters"
                  name="liters"
                  type="number"
                  min="0"
                  className={`${
                    errors.liters && touched.liters ? 'border-red-500' : ''
                  } block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-primary focus:outline-none focus:ring-primary-hover sm:text-sm`}
                />
              </div>
              <ErrorMessage name="liters" component="p" className="text-red-500 text-xs italic" />
            </div>
          )}
        </div>
      </Form>
    )}
  </Formik>
</div>
);
}
SnNaCk
  • 2,370
  • 2
  • 5
  • 16

0 Answers0