I am making a form using Format and Material UI, however when I try to submit the form, nothing happens. I have tried changing button's type, checking initial values and. validation schema. Here is the code of the useFormik and MUI form:
const initialValues = useMemo<Course>(
() => ({
category: '',
name: '',
grade: '',
month: '',
year: '',
}),
[],
);
const validationSchema = yup.object({
category: yup.string().required(t('errors:cannotBeEmpty')),
name: yup.string().required(t('errors:cannotBeEmpty')),
grade: yup.string().required(t('errors:pleasePick')),
month: yup.string().required(t('errors:cannotBeEmpty', { name: t('common:date') })),
year: yup.number().required(t('errors:cannotBeEmpty', { name: t('common:date') })),
});
const { values, touched, errors, handleChange, setFieldValue, handleSubmit, isSubmitting, resetForm } =
useFormik<any>({
initialValues,
validationSchema,
onSubmit: async ({ category, name, grade, month, year }, { setErrors }) => {
console.log(values);
// const date = new Date(year, month);
// try {
// await dispatch(actions.createGlance({ name: gpa, grade, date, category }));
// setMessageModalVisible(true);
// } catch (err) {
// if (err.message) {
// toast.error(err.message);
// }
// setErrors(err.errors ?? {});
// }
},
enableReinitialize: true,
});
useEffect(() => {
if (!open) {
resetForm();
}
}, [resetForm, open]);
return (
<mui.Modal open={open} onClose={onClose}>
<mui.Box sx={modalStyle}>
<mui.Box sx={closeButton}>
<img style={{ cursor: 'pointer' }} src={CloseIcon} alt="close-icon" onClick={onClose} />
</mui.Box>
<mui.Box sx={{ textAlign: 'center', width: '506px', margin: '0 auto' }}>
<mui.Typography sx={modalTitle}>{t('profile.student.transcriptScreen.addTests')}</mui.Typography>
<mui.Typography sx={modalSubTitle}>
{t('profile.student.transcriptScreen.addYourFinalGrade')}
<mui.Typography onClick={openLetterGradingScaleModal} sx={modalBlueSubTitle}>
{' '}
{t('profile.student.transcriptScreen.clickHereToViewScale')}
</mui.Typography>
</mui.Typography>
</mui.Box>
<mui.FormControl
<mui.Box style={{ display: 'flex', justifyContent: 'center', margin: '64px 0 16px 0' }}>
<mui.FormControl style={{ width: '598px' }}>
<mui.InputLabel id="course-selection-label">
{t('profile.student.transcriptScreen.selectCourse')}
</mui.InputLabel>
<mui.Select
label={t('profile.student.transcriptScreen.selectCourse')}
labelId="course-selection-label"
value={values.category ?? ''}
name="category"
onChange={handleChange}
>
{categoryOptions.map(({ name, id }) => (
<mui.MenuItem value={id}>{name}</mui.MenuItem>
))}
</mui.Select>
</mui.FormControl>
</mui.Box>
{values.category !== '' && (
<mui.Box
style={{ paddingBottom: '16px', margin: '0 auto', width: '598px', borderBottom: '1px solid #E0E0E0' }}
>
<mui.Box style={{ display: 'flex', justifyContent: 'space-between', width: '598px', margin: '16px auto' }}>
<mui.FormControl style={{ width: '48%' }}>
<mui.InputLabel id="course-name-label">
{t('common:subjectCourseName', {
subject:
values.category === 'SOCIAL_STUDIES'
? 'Social Studies'
: values.category.toLowerCase().charAt(0).toUpperCase() +
values.category.toLowerCase().slice(1),
})}
</mui.InputLabel>
<mui.OutlinedInput
name="name"
value={values.name ?? ''}
onChange={handleChange}
label={t('common:subjectCourseName', {
subject:
values.category === 'SOCIAL_STUDIES'
? 'Social Studies'
: values.category.toLowerCase().charAt(0).toUpperCase() +
values.category.toLowerCase().slice(1),
})}
></mui.OutlinedInput>
</mui.FormControl>
<mui.FormControl style={{ width: '48%' }}>
<mui.InputLabel id="course-grade-label">{t('common:grade')}</mui.InputLabel>
<mui.Select name="grade" value={values.grade ?? ''} onChange={handleChange} label={t('common:grade')}>
{gradeOptions.map(({ name }) => (
<mui.MenuItem value={name}>{name}</mui.MenuItem>
))}
</mui.Select>
</mui.FormControl>
</mui.Box>
<mui.Box style={{ display: 'flex', justifyContent: 'space-between', width: '598px', margin: '16px auto' }}>
<mui.FormControl style={{ width: '48%' }}>
<mui.InputLabel id="course-semester-label">{t('common:semesterTaken')}</mui.InputLabel>
<mui.Select
name="month"
value={values.month ?? ''}
onChange={handleChange}
label={t('common:semesterTaken')}
>
{semesterOptions.map(({ name, id }) => (
<mui.MenuItem value={id}>{name}</mui.MenuItem>
))}
</mui.Select>
</mui.FormControl>
<mui.FormControl style={{ width: '48%' }}>
<mui.InputLabel id="course-year-label">{t('common:yearTaken')}</mui.InputLabel>
<mui.Select name="year" value={values.year ?? ''} onChange={handleChange} label={t('common:yearTaken')}>
{yearOptions.map(({ name }) => (
<mui.MenuItem value={+name}>{name}</mui.MenuItem>
))}
</mui.Select>
</mui.FormControl>
</mui.Box>
</mui.Box>
)}
{values.category !== '' && (
<mui.Box
style={{
paddingTop: '32px',
width: '598px',
margin: '0 auto',
display: 'flex',
justifyContent: 'space-between',
}}
>
<mui.Button style={{ fontWeight: 600 }} variant="outlined">
{t('common:addMore')}
</mui.Button>
<mui.Button type="button" onClick={() => handleSubmit()} style={{ fontWeight: 600 }} variant="contained">
{t('common:save')}
</mui.Button>
</mui.Box>
)}
</mui.Box>
</mui.Modal>
);
I have checked a plenty of other Stackoverflow posts, but none of the responses helped me. I would be really pleased if someone helps me with this issue! Thank you.