Fix form validation

2 files changed, 51 insertions, 20 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>
diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
index 1f228d8..cbab494 100644
--- a/src/features/auth/GuestLogin.tsx
+++ b/src/features/auth/GuestLogin.tsx
@@ -10,8 +10,7 @@ function GuestLogin() {
   const navigate = useNavigate();
   const [login] = useLoginMutation();
 
-  const { register, handleSubmit,
-  formState: { isDirty, isValid } } = useForm<LoginRequest>({
+  const { register, handleSubmit, formState: { errors } } = useForm<LoginRequest>({
     defaultValues: {
       firstName: '',
       lastName: ''
@@ -29,7 +28,12 @@ function GuestLogin() {
 
   return (
     <Container component="form" maxWidth="xs" onSubmit={handleSubmit(onSubmit)}>
-      <Box sx={{ mt: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Box 
+        sx={{ mt: 8, 
+        display: "flex", 
+        flexDirection: "column", 
+        alignItems: "center" }}
+      >
           <Typography variant="h6">
             Guest Login
           </Typography>
@@ -38,24 +42,26 @@ function GuestLogin() {
             variant="outlined"
             margin="normal"
             fullWidth
-            required
-            {...register("firstName", { required: true })}
+            error={!!errors.firstName}
+            helperText={errors.firstName?.message}
+            {...register("firstName", { required: "Please enter your first name" })}
           />
           <TextField
             label="Last Name"
             variant="outlined"
             margin="normal"
             fullWidth
-            required
-            {...register("lastName", { required: true })}
+            error={!!errors.lastName}
+            helperText={errors.lastName?.message}
+            {...register("lastName", { required: "Please enter your last name" })}
           />
           <Button 
             type="submit" 
             variant="contained" 
             fullWidth
             sx={{ mt: 2 }}
-            disabled={!isDirty || !isValid}>
-            Login
+          >
+            Log in
           </Button>
       </Box>
     </Container>