enh: improve error messages for required questions.

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

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])
 		},

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),

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
 		},

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
 		},

src/components/Questions/QuestionGrid.vue

@@ -264,6 +264,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
@@ -315,30 +320,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>

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.
 		 *

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])

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

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