basic title validation

src/modules/feature/room/RoomForm.vue

@@ -1,6 +1,14 @@
 <template>
 	<div>
-		<VTextField v-model="roomData.title" label="Name des Raumes" class="mb-8" />
+		<VTextField
+			v-model="roomData.title"
+			label="Name des Raumes"
+			class="mb-8"
+			:error-messages="
+				v$.roomData.title.$errors.map((e: ErrorObject) => e.$message)
+			"
+			@blur="v$.roomData.title.$touch"
+		/>
 		<div class="mb-8">
 			<RoomColorPicker v-model:selected-color="roomData.displayColor" />
 		</div>
@@ -21,7 +29,9 @@
 		</div>
 		<div class="d-flex">
 			<VSpacer />
-			<VBtn variant="text" class="mr-4">{{ $t("common.actions.cancel") }}</VBtn>
+			<VBtn variant="text" class="mr-4" @click="onCancel">
+				{{ $t("common.actions.cancel") }}
+			</VBtn>
 			<VBtn variant="flat" color="primary" @click="onSave">
 				{{ $t("common.actions.save") }}
 			</VBtn>
@@ -30,18 +40,25 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, watchEffect } from "vue";
+import { computed, PropType, ref, watch, watchEffect } from "vue";
 import { RoomColorEnum } from "./RoomColorPicker/types";
 import RoomColorPicker from "./RoomColorPicker/RoomColorPicker.vue";
 import { DatePicker } from "@ui-date-time-picker";
 import { Room } from "@/types/room/Room";
+import { ErrorObject, useVuelidate } from "@vuelidate/core";
+import { helpers, required } from "@vuelidate/validators";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps({
 	room: {
 		type: Object as PropType<Room | undefined>,
 	},
 });
 
+const router = useRouter();
+const { t } = useI18n();
+
 const roomData = ref<Partial<Room>>({
 	title: "",
 	shortTitle: "",
@@ -56,9 +73,19 @@ watchEffect(() => {
 	}
 });
 
-const shortTitle = computed(() => {
-	return roomData.value.title?.slice(0, 2);
-});
+// generate short title
+watch(
+	() => roomData.value.title,
+	(newTitle, oldTitle) => {
+		if (!newTitle || newTitle === oldTitle) return;
+		if (newTitle.length < 2) return;
+
+		const shortTitle = newTitle?.slice(0, 2);
+		if (shortTitle === roomData.value.shortTitle) return;
+
+		roomData.value.shortTitle = shortTitle;
+	}
+);
 
 const onUpdateStartDate = (newDate: string) => {
 	roomData.value.startDate = newDate;
@@ -69,9 +96,31 @@ const onUpdateEndDate = (newDate: string) => {
 };
 
 const onSave = () => {
-	roomData.value.shortTitle = shortTitle.value;
 	console.log(roomData.value);
 };
+
+const onCancel = () => {
+	// TODO use useConfirmationDialog here, when it's refactored
+	router.go(-1);
+};
+
+// Validation
+const rules = computed(() => ({
+	roomData: {
+		title: {
+			required: helpers.withMessage(t("common.validation.required2"), required),
+		},
+	},
+}));
+
+const v$ = useVuelidate(rules, { roomData }, { $lazy: true, $autoDirty: true });
+
+watch(
+	() => v$.value,
+	() => {
+		console.log("hello?", v$.value);
+	}
+);
 </script>
 
 <style lang=""></style>

src/modules/util/validators/validators.ts

@@ -52,7 +52,6 @@ export const isValidTimeFormat = (value: string | null) => {
  * Checks if given value has valid time format
  */
 export const isValidDateFormat = (value: string | null) => {
-	console.log(value);
 	if (value === "" || value === null || value === undefined) {
 		return true;
 	}