diff options
| author | Michael Hunteman <michael@huntm.net> | 2024-03-03 12:23:59 -0800 |
|---|---|---|
| committer | Michael Hunteman <michael@huntm.net> | 2024-03-03 12:23:59 -0800 |
| commit | 37768908d2271d00d6d87fef24ad6e9ac17c97e8 (patch) | |
| tree | 7ac7f3520fccb7e578c6ddf1eb282b76733ff853 /src/components | |
| parent | 535a57ba6c3060193a7a12e05135fffd209c7d97 (diff) | |
Mark text fields as required
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/RsvpForm.tsx | 36 |
1 files changed, 19 insertions, 17 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 |