Fix form validation

1 files changed, 36 insertions, 11 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 8c67139..448401e 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -19,7 +19,7 @@ function RsvpForm() {
   const [updateGuest] = useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
 
-  const { register, handleSubmit, control } = useForm({
+  const { register, handleSubmit, control, formState: { errors } } = useForm({
     defaultValues: {
       id: guest?.id,
       firstName: guest?.firstName,
@@ -48,9 +48,15 @@ function RsvpForm() {
           <Typography>RSVP Deadline: </Typography>
         </Grid>
         <Grid item lg={12}>
-          <FormControl sx={{ ml: 8 }}>
-            <Grid container>
-              <FormLabel sx={{ m: 2 }}>Will you attend our wedding?</FormLabel>
+          <FormControl>
+            <Box 
+              sx={{ display: "flex", 
+              flexDirection: "row", 
+              alignItems: "center" }}
+            >
+              <FormLabel sx={{ mr: 2 }} error={!!errors.attendance}>
+                Will you attend?
+              </FormLabel>
               <Controller
                 name="attendance"
                 control={control}
@@ -70,7 +76,7 @@ function RsvpForm() {
                   </RadioGroup>
                 )}
               />
-            </Grid>
+            </Box>
           </FormControl>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
@@ -78,17 +84,27 @@ function RsvpForm() {
             label="Email"
             variant="outlined"
             fullWidth
-            required
-            {...register("email")}
+            error={!!errors.email}
+            helperText={errors.email?.message}
+            {...register("email", 
+              { required: "Please enter your email address", 
+                pattern: { value: /\S+@\S+\.\S+/, 
+                  message: "Please enter a valid email address" } 
+              })}
           />
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
           <TextField
             label="Party Size"
+            type="number"
             variant="outlined"
             fullWidth
-            required
-            {...register("partySize")}
+            error={!!errors.partySize}
+            helperText={errors.partySize?.message}
+            {...register("partySize", 
+              { required: "Please enter your party size", 
+                min: { value: 1, message: "Please enter a positive integer" }, 
+                max: { value: 9, message: "Please enter an integer less than 10" } })}
           />
         </Grid>
         <Grid item xs={12}>
@@ -102,8 +118,17 @@ function RsvpForm() {
           />
         </Grid>
         <Grid item xs={12}>
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <Button type="submit" variant="contained">RSVP</Button>
+          <Box 
+            sx={{ display: "flex", 
+            flexDirection: "column", 
+            alignItems: "center" }}
+          >
+            <Button 
+              type="submit" 
+              variant="contained"
+            >
+              RSVP
+            </Button>
           </Box>
         </Grid>
       </Grid>