second form validation

src/Components/PatientForm/FormSection2.tsx

@@ -1,36 +1,75 @@
-import * as React from 'react';
 import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
 import { useFormik } from "formik";
 import * as yup from "yup";
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 
-export default function FormSection1(){
+interface FormValues {
-    const [state, setState] = React.useState({
+  maritalStatus: string;
-        married: false,
+  numberOfChildren: string;
-        single: false,
+  ages: string;
-        widowed: false,
+  occupation: string;
-        separated: false,
+  hoursPerWeek: number | string;
-        divorced: false,
+  employer: string;
-      });
+  businessPhone: string;
-    
+  spouseName: string;
-      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  spouseEmployer: string;
-        setState({ ...state, [event.target.name]: event.target.checked });
+  spouseBusinessPhone: string;
-      };
+  emergencyContact: string;
+  relationship: string;
+  phone: string;
+}
 
+const validationSchema = yup.object({
+  maritalStatus:yup.string().required("Marital Status is required"),
+  numberOfChildren:yup.string().required("Full name is required"),
+  ages:yup.string().required("Full name is required"),
+  occupation:yup.string().required("Occupation is required"),
+//   hoursPerWeek: yup.number().required('Required'),
+//   employer:yup.string().required("Full name is required"),
+//   businessPhone:yup.string().required("Full name is required"),
+  spouseName:yup.string().required("Spouse name is required"),
+//   spouseEmployer:yup.string().required("Full name is required"),
+//   spouseBusinessPhone:yup.string().required("Full name is required"),
+  emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
+  relationship:yup.string().required("Relationship is required"),
+  phone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
+});
 
+const Form: React.FC = () => {
+    const formik = useFormik<FormValues>({
+        initialValues:{
+            maritalStatus:'',
+            numberOfChildren:'',
+            ages:'',
+            occupation:'',
+            hoursPerWeek:'',
+            employer:'',
+            businessPhone:'',
+            spouseName:'',
+            spouseEmployer:'',
+            spouseBusinessPhone:'',
+            emergencyContact:'',
+            relationship:'',
+            phone:''
+        },
+        validationSchema,
+        onSubmit:(values)=>{
+            console.log(values);
+        }
+    })
     return(
         <>
-        
+        <form onSubmit={formik.handleSubmit}>
-        <form>
         <Grid container direction="row">
-        <Grid item xs={8} className='collapsable-form-style textfield-padding' sx={{paddingLeft:"14px"}}>
+            <Grid item xs={8} className='collapsable-form-style ' sx={{paddingLeft:"14px"}}>
             <FormControl>
             <FormLabel>Marital Status</FormLabel>
                 <RadioGroup
                     aria-labelledby="demo-radio-buttons-group-label"
                     defaultValue="married"
-                    name="radio-buttons-group"
+                    name="maritalStatus"
-                    onChange={handleChange}
+                    onChange={formik.handleChange}
+                    value={formik.values.maritalStatus}
                     sx={{display:'flex', flexDirection:'row'}}
                     >
                     <FormControlLabel value="married" control={<Radio />} label="Married" />
@@ -39,45 +78,148 @@ export default function FormSection1(){
                     <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
                     <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
                 </RadioGroup>
-                </FormControl>
+                {formik.touched.maritalStatus && formik.errors.maritalStatus ? (
+                    <div>{formik.errors.maritalStatus}</div>
+                ) : null}
+            </FormControl>
             </Grid>
            
             <Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Number of Children/Ages" className='collapsable-form-style'/>
+                <TextField 
+                variant="filled" 
+                label="Number of Children/Ages" 
+                className='collapsable-form-style'
+                name='numberOfChildren'
+                onChange={formik.handleChange}
+                value={formik.values.numberOfChildren}
+                onBlur={formik.handleBlur}
+                error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
+                helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
+                />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Occupation" className='collapsable-form-style'/>
+                <TextField 
+                variant="filled" 
+                label="Occupation" 
+                className='collapsable-form-style'
+                name='occupation'
+                onChange={formik.handleChange}
+                value={formik.values.occupation}
+                onBlur={formik.handleBlur}
+                error={formik.touched.occupation && Boolean(formik.errors.occupation)}
+                helperText={formik.touched.occupation && formik.errors.occupation}
+                />
+               
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Hours/Week" type="number" className='collapsable-form-style'/>
+                 <TextField 
+                 variant="filled" 
+                 label="Hours/Week" 
+                 type="number" 
+                 className='collapsable-form-style'
+                 name='hoursPerWeek'
+                 onChange={formik.handleChange}
+                 value={formik.values.hoursPerWeek}
+                 onBlur={formik.handleBlur}
+                 />
+                 
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Employer" className='collapsable-form-style'/>
+                <TextField 
+                variant="filled" 
+                label="Employer" 
+                className='collapsable-form-style'
+                name='employer'
+                onChange={formik.handleChange}
+                value={formik.values.employer}
+                onBlur={formik.handleBlur}
+                />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
+                <TextField 
+                variant="filled" 
+                label="Business Phone" 
+                type="tel" 
+                className='collapsable-form-style'
+                name='businessPhone'
+                onChange={formik.handleChange}
+                value={formik.values.businessPhone}
+                onBlur={formik.handleBlur}
+                />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Spouse's Name" className='collapsable-form-style'/>
+                 <TextField 
+                 variant="filled" 
+                 label="Spouse's Name" 
+                 className='collapsable-form-style'
+                 name='spouseName'
+                 onChange={formik.handleChange}
+                 value={formik.values.spouseName}
+                 onBlur={formik.handleBlur}
+                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Spouse's Employer" className='collapsable-form-style'/>
+                 <TextField 
+                 variant="filled" 
+                 label="Spouse's Employer" 
+                 className='collapsable-form-style'
+                 name='spouseEmployer'
+                 onChange={formik.handleChange}
+                 value={formik.values.spouseEmployer}
+                 onBlur={formik.handleBlur}
+                 />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
+                  <TextField 
+                  variant="filled" 
+                  label="Business Phone" 
+                  type="tel" 
+                  className='collapsable-form-style'
+                  name='spouseBusinessPhone'
+                  onChange={formik.handleChange}
+                  value={formik.values.spouseBusinessPhone}
+                  onBlur={formik.handleBlur}
+                  />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Emergency Contact" className='collapsable-form-style'/>
+                   <TextField 
+                   variant="filled" 
+                   label="Emergency Contact" 
+                   className='collapsable-form-style'
+                   name='emergencyContact'
+                   onChange={formik.handleChange}
+                   value={formik.values.emergencyContact}
+                   onBlur={formik.handleBlur}
+                   />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Relationship" className='collapsable-form-style'/>
+                    <TextField 
+                    variant="filled" 
+                    label="Relationship" 
+                    className='collapsable-form-style'
+                    name='relationship'
+                    onChange={formik.handleChange}
+                    value={formik.values.relationship}
+                    onBlur={formik.handleBlur}
+                    />
             </Grid>
             <Grid item xs={4} className='collapsable-form-style textfield-padding'>
-            <TextField variant="filled" label="Phone" type="tel" className='collapsable-form-style'/>
+                     <TextField 
+                     variant="filled" 
+                     label="Phone" type="tel" 
+                     className='collapsable-form-style'
+                     name='phone'
+                     onChange={formik.handleChange}
+                     value={formik.values.phone}
+                     onBlur={formik.handleBlur}
+                     />
             </Grid>
         </Grid>
         </form>
+
         </>
     )
-}
+};
+
+export default Form;