RyderTech/rsvp-manager
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Add required field validation to RSVP form - Make attendance, guest info, and guest details required

Browse Source
This commit is contained in:
Starstrike
2025-05-01 16:12:07 -04:00
parent 3a7f62fdbc
commit bc8ac57697
1 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/RSVPForm.tsx
View File

@@ -36,7 +36,7 @@ const RSVPForm: React.FC = () => {
name: '',
attending: '',
bringing_guests: '',
guest_count: 0,
guest_count: 1,
guest_names: '',
items_bringing: []
});
@@ -146,6 +146,25 @@ const RSVPForm: React.FC = () => {
setIsSubmitting(true);
setError(null);
// Validate required fields
if (!formData.name.trim() || !formData.attending) {
setError('Please fill in all required fields');
setIsSubmitting(false);
return;
}
if (formData.attending === 'yes' && !formData.bringing_guests) {
setError('Please indicate if you are bringing guests');
setIsSubmitting(false);
return;
}
if (formData.bringing_guests === 'yes' && (formData.guest_count < 1 || !formData.guest_names.trim())) {
setError('Please provide the number and names of your guests');
setIsSubmitting(false);
return;
}
try {
const submissionData = {
...formData,
@@ -320,7 +339,7 @@ const RSVPForm: React.FC = () => {
variant="outlined"
/>
<FormControl fullWidth>
<FormControl fullWidth required>
<InputLabel>Are you attending?</InputLabel>
<Select
name="attending"
@@ -329,6 +348,7 @@ const RSVPForm: React.FC = () => {
label="Are you attending?"
required
>
<MenuItem value="">Select an option</MenuItem>
<MenuItem value="yes">Yes</MenuItem>
<MenuItem value="no">No</MenuItem>
</Select>
@@ -336,14 +356,16 @@ const RSVPForm: React.FC = () => {
{formData.attending === 'yes' && (
<>
<FormControl fullWidth>
<FormControl fullWidth required>
<InputLabel>Are you bringing any guests?</InputLabel>
<Select
name="bringing_guests"
value={formData.bringing_guests}
onChange={handleSelectChange}
label="Are you bringing any guests?"
required
>
<MenuItem value="">Select an option</MenuItem>
<MenuItem value="yes">Yes</MenuItem>
<MenuItem value="no">No</MenuItem>
</Select>
@@ -359,7 +381,10 @@ const RSVPForm: React.FC = () => {
onChange={handleChange}
fullWidth
variant="outlined"
required
inputProps={{ min: 1 }}
error={formData.guest_count < 1}
helperText={formData.guest_count < 1 ? "Number of guests must be at least 1" : ""}
/>
<TextField
@@ -371,7 +396,10 @@ const RSVPForm: React.FC = () => {
rows={3}
fullWidth
variant="outlined"
required
placeholder="Please list the names of your guests"
error={!formData.guest_names.trim()}
helperText={!formData.guest_names.trim() ? "Please enter the names of your guests" : ""}
/>
</>
)}
@@ -410,7 +438,11 @@ const RSVPForm: React.FC = () => {
variant="contained"
color="primary"
size="large"
disabled={isSubmitting}
disabled={isSubmitting ||
!formData.name.trim() ||
!formData.attending ||
(formData.attending === 'yes' && !formData.bringing_guests) ||
(formData.bringing_guests === 'yes' && (formData.guest_count < 1 || !formData.guest_names.trim()))}
sx={{ mt: 2 }}
>
{isSubmitting ? 'Submitting...' : 'Submit RSVP'}