fix: add validation method and error message

src/components/Questions/QuestionDropdown.vue

@@ -10,6 +10,7 @@
 		:warningInvalid="answerType.warningInvalid"
 		:contentValid="contentValid"
 		:shiftDragHandle="shiftDragHandle"
+		:errorMessage="errorMessage"
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionCheckbox
@@ -65,7 +66,7 @@
 					<AnswerInput
 						v-for="(answer, index) in choices"
 						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
 						:formId="formId"
 						isDropdown
@@ -184,6 +185,16 @@
 	},
 
 	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/QuestionGrid.vue

@@ -112,7 +112,7 @@
 						<AnswerInput
 							v-for="(answer, index) in columns"
 							:key="answer.local ? 'option-local' : answer.id"
 							ref="input"
 							:answer="answer"
 							:formId="formId"
 							:index="index"
@@ -150,7 +150,7 @@
 						<AnswerInput
 							v-for="(answer, index) in rows"
 							:key="answer.local ? 'option-local' : answer.id"
 							ref="input"
 							:answer="answer"
 							:formId="formId"
 							:index="index"
@@ -264,6 +264,11 @@
 
 	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 @@
 
 			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,6 @@
 						:value="option.toString()"
 						:name="`${id}-answer`"
 						type="radio"
-						:required="checkRequired(option)"
 						@update:modelValue="onChange"
 						@keydown.enter.exact.prevent="onKeydownEnter" />
 				</div>
@@ -203,6 +203,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 +241,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/QuestionMultiple.vue

@@ -84,7 +84,6 @@
 					:value="answer.id.toString()"
 					:name="`${id}-answer`"
 					:type="isUnique ? 'radio' : 'checkbox'"
-					:required="checkRequired(answer.id)"
 					@update:modelValue="onChange"
 					@keydown.enter.exact.prevent="onKeydownEnter">
 					{{ answer.text }}
@@ -97,7 +96,6 @@
 						:value="otherAnswer ?? QUESTION_EXTRASETTINGS_OTHER_PREFIX"
 						:name="`${id}-answer`"
 						:type="isUnique ? 'radio' : 'checkbox'"
-						:required="checkRequired('other-answer')"
 						class="question__label"
 						@update:modelValue="onChangeOther"
 						@keydown.enter.exact.prevent="onKeydownEnter">
@@ -136,7 +134,7 @@
 					<AnswerInput
 						v-for="(answer, index) in choices"
 						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
 						:formId="formId"
 						:index="index"
@@ -361,6 +359,11 @@
 
 	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
@@ -518,30 +521,6 @@
 			}
 		},
 
-		/**
-		 * 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
-		},
-
 		/**
 		 * Update status extra setting allowOtherAnswer and save on DB
 		 *