Add required indicators and validation for event fields and custom questions

src/Pages/Events/CreateEventFormQuestionBlock.js

@@ -47,10 +47,11 @@ export default function CreateEventFormQuestionBlock({
 
       <label className="w-full mt-3 form-control">
         <div className="label">
-          <span className="label-text">Question text</span>
+          <span className="label-text">Question text *</span>
         </div>
         <input
           type="text"
+          required
           className="w-full text-sm input input-bordered sm:text-base"
           value={question.question}
           onChange={(e) => onUpdateField(question.id, 'question', e.target.value)}
@@ -83,6 +84,7 @@ export default function CreateEventFormQuestionBlock({
             <div key={`${question.id}-opt-${optIndex}`} className="flex gap-2 items-center">
               <input
                 type="text"
+                required
                 className="flex-1 text-sm input input-bordered input-sm"
                 value={option}
                 onChange={(e) => onUpdateAnswerOption(question.id, optIndex, e.target.value)}

src/Pages/Events/CreateEventPage.js

@@ -177,6 +177,19 @@ export default function CreateEventPage() {
       setSubmitError('Please enter an event name.');
       return;
     }
+    if (!date) {
+      setSubmitError('Please select an event date.');
+      return;
+    }
+
+    if (!time) {
+      setSubmitError('Please select an event time.');
+      return;
+    }
+    if (!location.trim()) {
+      setSubmitError('Please enter an event location.');
+      return;
+    }
     if (!adminId) {
       setSubmitError('Could not resolve your user id.');
       return;
@@ -208,6 +221,25 @@ export default function CreateEventPage() {
       if (!confirmed) return;
     }
 
+    const hasBlankQuestion = questions.some((q) => !String(q.question || '').trim());
+
+    if (hasBlankQuestion) {
+      setSubmitError('Please fill out all registration question text fields.');
+      return;
+    }
+
+    const hasBlankAnswerOption = questions.some((q) =>
+      ['multiple_choice', 'dropdown', 'checkbox'].includes(q.type) &&
+      (!Array.isArray(q.answer_options) ||
+        q.answer_options.length === 0 ||
+        q.answer_options.some((opt) => !String(opt || '').trim()))
+    );
+
+    if (hasBlankAnswerOption) {
+      setSubmitError('Please fill out all answer options for choice questions.');
+      return;
+    }
+
     const payload = {
       id: eventId,
       name: eventName.trim(),

src/Pages/Events/EditEventPage.js

@@ -190,6 +190,21 @@ export default function EditEventPage() {
       return;
     }
 
+    if (!date) {
+      setSubmitError('Please select an event date.');
+      return;
+    }
+
+    if (!time) {
+      setSubmitError('Please select an event time.');
+      return;
+    }
+
+    if (!location.trim()) {
+      setSubmitError('Please enter an event location.');
+      return;
+    }
+
     if (visibility === 'private' && !minimumVisibleRole) {
       setSubmitError('Please select a minimum visible role for private events.');
       return;
@@ -224,6 +239,25 @@ export default function EditEventPage() {
       if (!confirmed) return;
     }
 
+    const hasBlankQuestion = questions.some((q) => !String(q.question || '').trim());
+
+    if (hasBlankQuestion) {
+      setSubmitError('Please fill out all registration question text fields.');
+      return;
+    }
+
+    const hasBlankAnswerOption = questions.some((q) =>
+      ['multiple_choice', 'dropdown', 'checkbox'].includes(q.type) &&
+      (!Array.isArray(q.answer_options) ||
+        q.answer_options.length === 0 ||
+        q.answer_options.some((opt) => !String(opt || '').trim()))
+    );
+
+    if (hasBlankAnswerOption) {
+      setSubmitError('Please fill out all answer options for choice questions.');
+      return;
+    }
+
     const payload = {
       name: eventName.trim(),
       date,

src/Pages/Events/EventEditorForm.js

@@ -82,6 +82,7 @@ export default function EventEditorForm({
           </div>
           <input
             type="text"
+            required
             className="input input-bordered w-full text-sm sm:text-base"
             value={eventName}
             onChange={(e) => setEventName(e.target.value)}
@@ -96,6 +97,7 @@ export default function EventEditorForm({
             </div>
             <input
               type="date"
+              required
               className="input input-bordered w-full"
               value={date}
               onChange={(e) => setDate(e.target.value)}
@@ -107,6 +109,7 @@ export default function EventEditorForm({
             </div>
             <input
               type="time"
+              required
               className="input input-bordered w-full"
               value={time}
               onChange={(e) => setTime(e.target.value)}
@@ -116,10 +119,11 @@ export default function EventEditorForm({
 
         <label className="form-control w-full">
           <div className="label">
-            <span className="label-text">Location</span>
+            <span className="label-text">Location *</span>
           </div>
           <input
             type="text"
+            required
             className="input input-bordered w-full text-sm sm:text-base"
             value={location}
             onChange={(e) => setLocation(e.target.value)}
@@ -302,9 +306,12 @@ export default function EventEditorForm({
         {visibility === 'private' && (
           <label className="form-control w-full">
             <div className="label">
-              <span className="label-text">Minimum visible role</span>
+              <span className="label-text">
+                Minimum visible role {visibility === 'private' && '*'}
+              </span>
             </div>
             <select
+              required={visibility === 'private'}
               className="select select-bordered w-full max-w-xs"
               value={minimumVisibleRole}
               onChange={(e) => setMinimumVisibleRole(e.target.value)}