Mark text fields as required

2 files changed, 55 insertions, 51 deletions

diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 448401e..6c43ae8 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -36,7 +36,7 @@ function RsvpForm() {
   };
 
   return (
-    <Container component="form" maxWidth="sm" onSubmit={handleSubmit(onSubmit)}>
+    <Container component="form" maxWidth="sm" noValidate onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={2} sx={{ mt: 8 }}>
         <Grid item xs={12} md={4} lg={4}>
           <Typography>Date: April 14, 2025</Typography>
@@ -49,12 +49,12 @@ function RsvpForm() {
         </Grid>
         <Grid item lg={12}>
           <FormControl>
-            <Box 
-              sx={{ display: "flex", 
-              flexDirection: "row", 
+            <Box
+              sx={{ display: "flex",
+              flexDirection: "row",
               alignItems: "center" }}
             >
-              <FormLabel sx={{ mr: 2 }} error={!!errors.attendance}>
+              <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required>
                 Will you attend?
               </FormLabel>
               <Controller
@@ -86,10 +86,11 @@ function RsvpForm() {
             fullWidth
             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" } 
+            required
+            {...register("email",
+              { required: "This field is required",
+                pattern: { value: /\S+@\S+\.\S+/,
+                  message: "Please enter a valid email address" }
               })}
           />
         </Grid>
@@ -101,9 +102,10 @@ function RsvpForm() {
             fullWidth
             error={!!errors.partySize}
             helperText={errors.partySize?.message}
-            {...register("partySize", 
-              { required: "Please enter your party size", 
-                min: { value: 1, message: "Please enter a positive integer" }, 
+            required
+            {...register("partySize",
+              { required: "This field is required",
+                min: { value: 1, message: "Please enter a positive integer" },
                 max: { value: 9, message: "Please enter an integer less than 10" } })}
           />
         </Grid>
@@ -118,13 +120,13 @@ function RsvpForm() {
           />
         </Grid>
         <Grid item xs={12}>
-          <Box 
-            sx={{ display: "flex", 
-            flexDirection: "column", 
+          <Box
+            sx={{ display: "flex",
+            flexDirection: "column",
             alignItems: "center" }}
           >
-            <Button 
-              type="submit" 
+            <Button
+              type="submit"
               variant="contained"
             >
               RSVP
diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
index cbab494..c3b3b96 100644
--- a/src/features/auth/GuestLogin.tsx
+++ b/src/features/auth/GuestLogin.tsx
@@ -27,42 +27,44 @@ function GuestLogin() {
   };
 
   return (
-    <Container component="form" maxWidth="xs" onSubmit={handleSubmit(onSubmit)}>
-      <Box 
-        sx={{ mt: 8, 
-        display: "flex", 
-        flexDirection: "column", 
+    <Container component="form" maxWidth="xs" noValidate onSubmit={handleSubmit(onSubmit)}>
+      <Box
+        sx={{ mt: 8,
+        display: "flex",
+        flexDirection: "column",
         alignItems: "center" }}
       >
-          <Typography variant="h6">
-            Guest Login
-          </Typography>
-          <TextField
-            label="First Name"
-            variant="outlined"
-            margin="normal"
-            fullWidth
-            error={!!errors.firstName}
-            helperText={errors.firstName?.message}
-            {...register("firstName", { required: "Please enter your first name" })}
-          />
-          <TextField
-            label="Last Name"
-            variant="outlined"
-            margin="normal"
-            fullWidth
-            error={!!errors.lastName}
-            helperText={errors.lastName?.message}
-            {...register("lastName", { required: "Please enter your last name" })}
-          />
-          <Button 
-            type="submit" 
-            variant="contained" 
-            fullWidth
-            sx={{ mt: 2 }}
-          >
-            Log in
-          </Button>
+        <Typography variant="h6">
+          Guest Login
+        </Typography>
+        <TextField
+          label="First Name"
+          variant="outlined"
+          margin="normal"
+          fullWidth
+          error={!!errors.firstName}
+          helperText={errors.firstName?.message}
+          required
+          {...register("firstName", { required: "This field is required" })}
+        />
+        <TextField
+          label="Last Name"
+          variant="outlined"
+          margin="normal"
+          fullWidth
+          error={!!errors.lastName}
+          helperText={errors.lastName?.message}
+          required
+          {...register("lastName", { required: "This field is required" })}
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          fullWidth
+          sx={{ mt: 2 }}
+        >
+          Log in
+        </Button>
       </Box>
     </Container>
   );