#1287: Fixed error messages

Author: sharonyang16

src/frontend/src/components/NERFormModal.tsx

@@ -45,7 +45,7 @@ const NERFormModal = ({
       disabled={disabled}
       showCloseButton={showCloseButton}
     >
-      <form id={formId} onSubmit={handleUseFormSubmit(onSubmitWrapper)}>
+      <form id={formId} onSubmit={handleUseFormSubmit(onSubmitWrapper)} noValidate>
         {children}
       </form>
     </NERModal>

src/frontend/src/pages/AdminToolsPage/FinanceConfig/AccountCodeFormModal.tsx

@@ -2,14 +2,14 @@ import { ExpenseType } from 'shared';
 import { ExpenseTypePayload } from '../../../hooks/finance.hooks';
 import { Controller, useForm } from 'react-hook-form';
 import NERFormModal from '../../../components/NERFormModal';
-import { Checkbox, FormControl, FormLabel } from '@mui/material';
+import { Checkbox, FormControl, FormLabel, FormHelperText } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { useToast } from '../../../hooks/toasts.hooks';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 const schema = yup.object().shape({
-  code: yup.number().required('Account Code is Required'),
+  code: yup.number().typeError('Account Code must be a number').required('Account Code is Required'),
   name: yup.string().required('Account Name is Required'),
   allowed: yup.boolean().required('Allowed is Required')
 });
@@ -23,8 +23,12 @@ interface AccountCodeFormModalProps {
 
 const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit }: AccountCodeFormModalProps) => {
   const toast = useToast();
-  const { handleSubmit, control, reset } = useForm({
-    mode: 'onChange',
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors }
+  } = useForm({
     resolver: yupResolver(schema),
     defaultValues: {
       code: defaultValues?.code,
@@ -58,10 +62,12 @@ const AccountCodeFormModal = ({ showModal, handleClose, defaultValues, onSubmit
       <FormControl fullWidth>
         <FormLabel>Account Name</FormLabel>
         <ReactHookTextField name="name" control={control} fullWidth />
+        <FormHelperText error>{errors.name?.message}</FormHelperText>
       </FormControl>
       <FormControl fullWidth>
         <FormLabel>Account Code</FormLabel>
         <ReactHookTextField name="code" control={control} fullWidth />
+        <FormHelperText error>{errors.code?.message}</FormHelperText>
       </FormControl>
       <FormControl>
         <FormLabel>Allowed?</FormLabel>

src/frontend/src/pages/AdminToolsPage/FinanceConfig/CreateVendorModal.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import NERFormModal from '../../../components/NERFormModal';
-import { FormControl, FormLabel } from '@mui/material';
+import { FormControl, FormLabel, FormHelperText } from '@mui/material';
 import ReactHookTextField from '../../../components/ReactHookTextField';
 import { useCreateVendor } from '../../../hooks/finance.hooks';
 import { useToast } from '../../../hooks/toasts.hooks';
@@ -33,8 +33,12 @@ const CreateVendorModal = ({ showModal, handleClose }: NewVendorProps) => {
     handleClose();
   };
 
-  const { handleSubmit, control, reset } = useForm({
-    mode: 'onChange',
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors }
+  } = useForm({
     resolver: yupResolver(schema),
     defaultValues: {
       name: ''
@@ -58,6 +62,7 @@ const CreateVendorModal = ({ showModal, handleClose }: NewVendorProps) => {
       <FormControl>
         <FormLabel>Vendor Name</FormLabel>
         <ReactHookTextField name="name" control={control} sx={{ width: 1 }} />
+        <FormHelperText error>{errors.name?.message}</FormHelperText>
       </FormControl>
     </NERFormModal>
   );