validation and alrert dialog

src/Components/Helper/AlertDialogBox.tsx

@@ -0,0 +1,35 @@
+import { Alert, AlertColor, Snackbar, Stack } from '@mui/material';
+
+type Props = {
+  open: boolean;
+  message: string;
+  severity: AlertColor;
+  duration: number;
+  handleAlertClose: () => void;
+};
+
+function AlertDialog({
+  open,
+  message,
+  severity,
+  duration,
+  handleAlertClose,
+}: Props) {
+  return (
+    <Stack spacing={2} sx={{ width: '100%' }}>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={open}
+        autoHideDuration={duration}
+        onClose={handleAlertClose}
+        sx={{ zIndex: 9999 }}
+      >
+        <Alert severity={severity} sx={{ width: '100%' }}>
+          {message}
+        </Alert>
+      </Snackbar>
+    </Stack>
+  );
+}
+
+export default AlertDialog;

src/Components/PatientForm/PatientForm.tsx

@@ -21,6 +21,7 @@ import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
 import OtherDetails8 from './OtherDetails8';
 import PatientImageMarker from '../ImageMarker/PatientImageMarker';
 import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
+import AlertDialog from '../Helper/AlertDialogBox';
 
   const Accordion = styled((props: AccordionProps) => (
     <MuiAccordion disableGutters elevation={0} square {...props} />
@@ -63,6 +64,7 @@ type Props={
 }
 
 export default function PatientForm({type}:Props){
+    const [alertProps, setAlertProps] = React.useState<any>({});
     const [expanded, setExpanded] = React.useState<string | false>('panel1');
     const [isChecked, setIsChecked] = React.useState(false);
     const [signature,setSignature]=React.useState('');
@@ -342,7 +344,22 @@ export default function PatientForm({type}:Props){
       setAllPatientData(updatedAllPatientData);
 
       localStorage.setItem('patientData', JSON.stringify(newPatientData));
+
+      if (
+        section1Data.fullName !== "" && section1Data.cellPhone &&
+        /^\d{10}$/.test(section1Data.cellPhone) && section1Data.email &&
+        /^\S+@\S+\.\S+$/.test(section1Data.email) && section1Data.age &&
+        section1Data.age !== "" && Number(section1Data.age) >= 0 && section1Data.mailingAddress &&
+        section1Data.mailingAddress !== "" ){
           TextFile();     
+        }else{
+          setAlertProps({
+            open: true,
+            severity: 'error',
+            message: 'Please fill all the mandatory fields with valid data!',
+            duration: 4000,
+          });
+        }
   };
   
   const TextFile = () => {
@@ -365,11 +382,24 @@ export default function PatientForm({type}:Props){
     setIsChecked(event.target.checked);
   };
 
+  const handleAlertClose = () => {
+    setAlertProps({});
+  };
+
   //@ts-ignore
   const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : [];
   
     return(
         <>
+          {alertProps && alertProps.open && (
+          <AlertDialog
+            open={alertProps.open}
+            message={alertProps.message}
+            severity={alertProps.severity}
+            duration={alertProps.duration}
+            handleAlertClose={handleAlertClose}
+          />
+          )}
             <Paper elevation={0} className='app-screen-constants'>
                 <Header/>
                     <Paper  elevation={0} sx={{margin:4, minHeight:550}} >

src/Components/PatientForm/PersonalSection1.tsx

@@ -136,13 +136,14 @@ export default function PersonalSection({handleFormSection1Data,patientDataDipla
                             homePhone: e.target.value,
                           }));
                     }}
-                    error={!(/^\d{10}$/.test(patient.homePhone))}
+                    // error={!(/^\d{10}$/.test(patient.homePhone))}
-                    helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
+                    // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
                 />
                 </Grid>
 
                 <Grid item xs={4} className='collapsable-form-style'>
                 <TextField
+                    required
                     variant="outlined"
                     label="Email"
                     name="email"