diff --git a/frontend/src/components/RSVPForm.tsx b/frontend/src/components/RSVPForm.tsx index 57566f9..3101ff9 100644 --- a/frontend/src/components/RSVPForm.tsx +++ b/frontend/src/components/RSVPForm.tsx @@ -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" /> - + Are you attending? @@ -336,14 +356,16 @@ const RSVPForm: React.FC = () => { {formData.attending === 'yes' && ( <> - + Are you bringing any guests? @@ -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" : ""} /> { 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'}