From 7e9b52d2e1605549d6d3176d1060a2ef4e7dbd4f Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Fri, 5 Jun 2026 13:59:14 +0200
Subject: [PATCH] enh: improve error messages for required questions.

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 lib/Service/SubmissionService.php             | 32 +++++++++-----
 src/components/Questions/QuestionColor.vue    | 12 ++++++
 src/components/Questions/QuestionDate.vue     | 42 +++++++++++++++----
 src/components/Questions/QuestionDropdown.vue | 12 ++++++
 src/components/Questions/QuestionFile.vue     |  8 ++++
 src/components/Questions/QuestionGrid.vue     | 38 +++++------------
 .../Questions/QuestionLinearScale.vue         | 32 ++++++--------
 src/components/Questions/QuestionLong.vue     | 15 +++++++
 src/components/Questions/QuestionMultiple.vue |  7 ++++
 src/components/Questions/QuestionShort.vue    | 15 +++++++
 10 files changed, 148 insertions(+), 65 deletions(-)

diff --git a/lib/Service/SubmissionService.php b/lib/Service/SubmissionService.php
index ca1e325b7..2b3ea7abc 100644
--- a/lib/Service/SubmissionService.php
+++ b/lib/Service/SubmissionService.php
@@ -485,9 +485,16 @@ public function validateSubmission(array $questions, array $answers, string $for
 			if ($question['isRequired']
 				&& (!$questionAnswered
 				|| !array_filter($answers[$questionId], static function (string|array $value): bool {
-					// file type
 					if (is_array($value)) {
-						return !empty($value['uploadedFileId']);
+						// file type
+						if (isset($value['uploadedFileId'])) {
+							return !empty($value['uploadedFileId']);
+						}
+
+						// Grid questions
+						return !empty(array_filter($value, static function ($subValue): bool {
+							return is_array($subValue) ? !empty(array_filter($subValue)) : $subValue !== '';
+						}));
 					}
 
 					return $value !== '';
@@ -557,16 +564,19 @@ public function validateSubmission(array $questions, array $answers, string $for
 					}
 					// Search corresponding option, return false if non-existent
 					else {
-						// Accept numeric strings like "46" from JSON payloads reliably (e.g. with hardening extensions enabled)
-						$answerId = is_int($answer) ? $answer : (is_string($answer) ? intval(trim($answer)) : null);
-
-						// Reject non-numeric / malformed values early
-						if ($answerId === null || (string)$answerId !== (string)intval($answerId)) {
-							throw new \InvalidArgumentException(sprintf('Answer "%s" for question "%s" is not a valid option.', is_scalar($answer) ? (string)$answer : gettype($answer), $question['text']));
-						}
+						$subAnswers = is_array($answer) ? $answer : [$answer];
+						foreach ($subAnswers as $subAnswer) {
+							// Accept numeric strings like "46" from JSON payloads reliably (e.g. with hardening extensions enabled)
+							$answerId = is_int($subAnswer) ? $subAnswer : (is_string($subAnswer) ? intval(trim($subAnswer)) : null);
+
+							// Reject non-numeric / malformed values early
+							if ($answerId === null || (string)$answerId !== (string)intval($answerId)) {
+								throw new \InvalidArgumentException(sprintf('Answer "%s" for question "%s" is not a valid option.', is_scalar($subAnswer) ? (string)$subAnswer : gettype($subAnswer), $question['text']));
+							}
 
-						if (!in_array($answerId, $optionIds, true)) {
-							throw new \InvalidArgumentException(sprintf('Answer "%s" for question "%s" is not a valid option.', $answer, $question['text']));
+							if (!in_array($answerId, $optionIds, true)) {
+								throw new \InvalidArgumentException(sprintf('Answer "%s" for question "%s" is not a valid option.', $subAnswer, $question['text']));
+							}
 						}
 					}
 				}
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index f2f2709a0..2655cb1b9 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -8,6 +8,7 @@
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<div
 			class="question__content"
@@ -17,6 +18,7 @@
 			<NcColorPicker
 				:modelValue="pickedColor"
 				advancedFields
+				:aria-required="isRequired"
 				@update:modelValue="onUpdatePickedColor">
 				<NcButton :disabled="!readOnly">
 					{{ colorPickerPlaceholder }}
@@ -87,6 +89,16 @@ export default {
 	},
 
 	methods: {
+		async validate() {
+			if (this.isRequired && this.pickedColor === '') {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
+			this.errorMessage = null
+			return true
+		},
+
 		onUpdatePickedColor(color) {
 			this.$emit('update:values', [color])
 		},
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index 671d0f0b4..e4e5aa1f3 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -8,6 +8,7 @@
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<template v-if="answerType.pickerType === 'date'" #actions>
 			<NcActionCheckbox
@@ -95,7 +96,8 @@
 				:type="dateTimePickerType"
 				:disabledDate="disabledDates"
 				:disabledTime="disabledTimes"
-				rangeSeparator=" - "
+				:aria-required="isRequired"
+				clearable
 				@update:modelValue="onValueChange" />
 		</div>
 		<template #insert>
@@ -146,25 +148,31 @@ export default {
 	},
 
 	computed: {
+		isRangeQuestion() {
+			return this.extraSettings?.dateRange || this.extraSettings?.timeRange
+				? true
+				: false
+		},
+
 		datetimePickerPlaceholder() {
 			if (this.readOnly) {
-				return this.extraSettings?.dateRange || this.extraSettings?.timeRange
+				return this.isRangeQuestion
 					? this.answerType.submitPlaceholderRange
 					: this.answerType.submitPlaceholder
 			}
-			return this.extraSettings?.dateRange || this.extraSettings?.timeRange
+			return this.isRangeQuestion
 				? this.answerType.createPlaceholderRange
 				: this.answerType.createPlaceholder
 		},
 
 		dateTimePickerType() {
-			return this.extraSettings?.dateRange || this.extraSettings?.timeRange
+			return this.isRangeQuestion
 				? this.answerType.pickerType + '-range'
 				: this.answerType.pickerType
 		},
 
 		time() {
-			if (this.extraSettings?.dateRange || this.extraSettings?.timeRange) {
+			if (this.isRangeQuestion) {
 				return this.values?.[0]
 					? [this.parse(this.values[0]), this.parse(this.values[1])]
 					: null
@@ -224,14 +232,27 @@ export default {
 	},
 
 	methods: {
+		async validate() {
+			if (this.isRequired && this.time === null) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
+			this.errorMessage = null
+			return true
+		},
+
 		/**
 		 * DateTimepicker show text in picker
 		 * Format depends on component-type date/datetime
 		 *
-		 * @param {Date} date the selected datepicker Date
+		 * @param {Date|Date[]} date the selected datepicker Date
 		 * @return {string}
 		 */
 		stringify(date) {
+			if (this.isRangeQuestion && Array.isArray(date)) {
+				return `${moment(date[0]).format(this.answerType.momentFormat)} - ${moment(date[1]).format(this.answerType.momentFormat)}`
+			}
 			return moment(date).format(this.answerType.momentFormat)
 		},
 
@@ -335,10 +356,15 @@ export default {
 		/**
 		 * Store Value
 		 *
-		 * @param {Date|Array<Date>} date The date or date range to store
+		 * @param {Date|Array<Date>|null} date The date or date range to store
 		 */
 		onValueChange(date) {
-			if (this.extraSettings?.dateRange || this.extraSettings?.timeRange) {
+			if (!date) {
+				this.$emit('update:values', [])
+				return
+			}
+
+			if (this.isRangeQuestion) {
 				this.$emit('update:values', [
 					moment(date[0]).format(this.answerType.storageFormat),
 					moment(date[1]).format(this.answerType.storageFormat),
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index e128031fe..a6fe06b96 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -10,6 +10,7 @@
 		:warningInvalid="answerType.warningInvalid"
 		:contentValid="contentValid"
 		:shiftDragHandle="shiftDragHandle"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionCheckbox
@@ -40,6 +41,7 @@
 				:searchable="false"
 				label="text"
 				:aria-label-combobox="selectOptionPlaceholder"
+				@invalid.prevent="validate"
 				@update:modelValue="onInput" />
 		</div>
 		<template v-else>
@@ -184,6 +186,16 @@ export default {
 	},
 
 	methods: {
+		async validate() {
+			if (this.isRequired && this.areNoneChecked) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
+			this.errorMessage = null
+			return true
+		},
+
 		onDragStart() {
 			this.isDragging = true
 		},
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index 799c5bfd5..61fa31ff4 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -118,10 +118,12 @@
 								ref="fileInput"
 								class="hidden-visually"
 								type="file"
+								:required="isRequired && values.length === 0"
 								:disabled="!readOnly"
 								:multiple="maxAllowedFilesCount > 1"
 								:name="name || undefined"
 								:accept="accept.length ? accept.join(',') : null"
+								@invalid.prevent="validate"
 								@input="onFileInput" />
 						</label>
 						<NcButton
@@ -422,6 +424,12 @@ export default {
 				)
 				return false
 			}
+
+			if (this.isRequired && this.values.length === 0) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
 			this.errorMessage = null
 			return true
 		},
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index 97d017acd..360d0ede8 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -23,7 +23,7 @@
 							<th class="first-column"></th>
 
 							<th
-								v-for="column of columns"
+								v-for="column in columns"
 								:key="column.local ? 'option-local' : column.id">
 								{{ column.text }}
 							</th>
@@ -31,11 +31,11 @@
 					</thead>
 					<tbody>
 						<tr
-							v-for="row of rows"
+							v-for="row in rows"
 							:key="row.local ? 'option-local' : row.id">
 							<td class="first-column">{{ row.text }}</td>
 							<td
-								v-for="column of columns"
+								v-for="column in columns"
 								:key="column.local ? 'option-local' : column.id">
 								<template v-if="questionType === 'radio'">
 									<NcCheckboxRadioSwitch
@@ -264,6 +264,14 @@ export default {
 
 	methods: {
 		async validate() {
+			if (
+				this.isRequired
+				&& (this.values.length === 0 || this.values === null)
+			) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
 			if (!this.isUnique) {
 				// Validate limits
 				const max = this.extraSettings.optionsLimitMax ?? 0
@@ -315,30 +323,6 @@ export default {
 
 			this.$emit('update:values', values)
 		},
-
-		/**
-		 * Is the provided answer required ?
-		 * This is needed for checkboxes as html5
-		 * doesn't allow to require at least ONE checked.
-		 * So we require the one that are checked or all
-		 * if none are checked yet.
-		 *
-		 * @return {boolean}
-		 */
-		checkRequired() {
-			// false, if question not required
-			if (!this.isRequired) {
-				return false
-			}
-
-			// true for Radiobuttons
-			if (this.isUnique) {
-				return true
-			}
-
-			// For checkboxes, only required if no other is checked
-			return this.areNoneChecked
-		},
 	},
 }
 </script>
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index 7ec7b4345..4a8888fde 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -8,6 +8,7 @@
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionInput
@@ -85,7 +86,8 @@
 						:value="option.toString()"
 						:name="`${id}-answer`"
 						type="radio"
-						:required="checkRequired(option)"
+						:required="isRequired"
+						@invalid.prevent="validate"
 						@update:modelValue="onChange"
 						@keydown.enter.exact.prevent="onKeydownEnter" />
 				</div>
@@ -203,6 +205,16 @@ export default {
 	},
 
 	methods: {
+		async validate() {
+			if (this.isRequired && this.values.length === 0) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
+			this.errorMessage = null
+			return true
+		},
+
 		onChange(option) {
 			this.$emit('update:values', [option])
 		},
@@ -231,24 +243,6 @@ export default {
 			})
 		},
 
-		/**
-		 * Is the provided answer required ?
-		 * This is needed for checkboxes as html5
-		 * doesn't allow to require at least ONE checked.
-		 * So we require the one that are checked or all
-		 * if none are checked yet.
-		 *
-		 * @return {boolean}
-		 */
-		checkRequired() {
-			// false, if question not required
-			if (!this.isRequired) {
-				return false
-			}
-
-			return true
-		},
-
 		/**
 		 * Resizes the given label to fit within the specified constraints.
 		 *
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index b53def6b2..ffabdb983 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -8,6 +8,7 @@
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<div class="question__content">
 			<textarea
@@ -23,6 +24,7 @@
 				:maxlength="maxStringLengths.answerText"
 				minlength="1"
 				:name="name || undefined"
+				@invalid.prevent="validate"
 				@input="onInput"
 				@keypress="autoSizeText"
 				@keydown.ctrl.enter="onKeydownCtrlEnter" />
@@ -75,6 +77,19 @@ export default {
 	},
 
 	methods: {
+		async validate() {
+			if (
+				this.isRequired
+				&& (this.values.length === 0 || this.values[0] === '')
+			) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
+			this.errorMessage = null
+			return true
+		},
+
 		onInput() {
 			const textarea = this.$refs.textarea
 			this.$emit('update:values', [textarea.value])
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 67d30ee44..8f7449205 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -85,6 +85,7 @@
 					:name="`${id}-answer`"
 					:type="isUnique ? 'radio' : 'checkbox'"
 					:required="checkRequired(answer.id)"
+					@invalid.prevent="validate"
 					@update:modelValue="onChange"
 					@keydown.enter.exact.prevent="onKeydownEnter">
 					{{ answer.text }}
@@ -99,6 +100,7 @@
 						:type="isUnique ? 'radio' : 'checkbox'"
 						:required="checkRequired('other-answer')"
 						class="question__label"
+						@invalid.prevent="validate"
 						@update:modelValue="onChangeOther"
 						@keydown.enter.exact.prevent="onKeydownEnter">
 						{{ t('forms', 'Other:') }}
@@ -361,6 +363,11 @@ export default {
 
 	methods: {
 		async validate() {
+			if (this.isRequired && this.areNoneChecked) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
 			if (!this.isUnique) {
 				// Validate limits
 				const max = this.extraSettings.optionsLimitMax ?? 0
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 7f2a1cdef..56ba76bb3 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -8,6 +8,7 @@
 		v-bind="questionProps"
 		:titlePlaceholder="answerType.titlePlaceholder"
 		:warningInvalid="answerType.warningInvalid"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<div class="question__content">
 			<input
@@ -25,6 +26,7 @@
 				minlength="1"
 				:type="validationObject.inputType"
 				:step="validationObject.inputType === 'number' ? 'any' : undefined"
+				@invalid.prevent="validate"
 				@input="onInput"
 				@keydown.enter.exact.prevent="onKeydownEnter" />
 			<NcActions
@@ -156,6 +158,19 @@ export default {
 	},
 
 	methods: {
+		async validate() {
+			if (
+				this.isRequired
+				&& (this.values.length === 0 || this.values[0] === '')
+			) {
+				this.errorMessage = t('forms', 'You must answer this question')
+				return false
+			}
+
+			this.errorMessage = null
+			return true
+		},
+
 		onInput() {
 			/** @type {HTMLObjectElement} */
 			const input = this.$refs.input