Added client side validation for fields

components/calendar/form/CreateEvent.vue

@@ -5,6 +5,9 @@ import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from
 const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
 const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
 const popoverOpen = ref(false)
+
+const { t } = useI18n()
+
 const isLoading = ref(false)
 
 const formErrors = reactive<{ message: string | null }>({
@@ -88,7 +91,7 @@ function handleCancel() {
       :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
@@ -104,8 +107,14 @@ function handleCancel() {
               name="new-event-title"
               required
               :placeholder="$t('entity.calendar.event.title')"
-              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+              :maxlength="120"
+              pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
+              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
             >
+
+            <div class="mt-2 mb-1 text-xs opacity-50">
+              {{ t('entity.calendar.event.patterns.title') }}
+            </div>
           </div>
 
           <div class="col-span-2 my-2 pl-8">
@@ -113,8 +122,13 @@ function handleCancel() {
               id="new-event-description"
               v-model="eventSkeleton.description"
               name="new-event-description"
-              :placeholder="$t('entity.addDescription')"              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+              :placeholder="$t('entity.addDescription')"
+              :maxlength="1200"
+              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
             />
+            <div class="mt-2 mb-1 text-xs opacity-50">
+              {{ t('entity.calendar.event.patterns.description') }}
+            </div>
           </div>
 
           <div class="col-span-2">
@@ -142,7 +156,10 @@ function handleCancel() {
             <div class="flex items-center gap-4">
               <PhTag size="18" weight="fill" />
 
-              <CalendarInputEventCategory v-model="eventSkeleton.category" :placeholder="$t('entity.category.addPrimary')" />
+              <CalendarInputEventCategory
+                v-model="eventSkeleton.category"
+                :placeholder="$t('entity.category.addPrimary')"
+              />
             </div>
           </div>
 
@@ -158,13 +175,21 @@ function handleCancel() {
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 
-              <input
-                id="new-event-location"
-                v-model="eventSkeleton.location"
-                type="text"
-                name="new-event-location"
-                :placeholder="$t('entity.calendar.event.addLocation')"
-                class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+              <div class="grow">
+                <input
+                  id="new-event-location"
+                  v-model="eventSkeleton.location"
+                  type="text"
+                  name="new-event-location"
+                  :placeholder="$t('entity.calendar.event.addLocation')"
+                  :maxlength="160"
+                  pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,160}"
+                  class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+                >
+                <div class="mt-2 mb-1 text-xs opacity-50">
+                  {{ t('entity.calendar.event.patterns.location') }}
+                </div>
+              </div>
             </div>
           </div>
 

components/calendar/form/UpdateEvent.vue

@@ -97,16 +97,22 @@ function handleCancel() {
             <div class="flex items-center gap-4">
               <PhPencilSimpleLine size="20" weight="fill" />
 
-              <input
-                id="new-event-title"
-                v-model="eventSkeleton.title"
-                type="text"
-                name="new-event-title"
-                required
-                :placeholder="$t('entity.calendar.event.title')"
-                :maxlength="120"
-                class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
-              >
+              <div class="grow">
+                <input
+                  id="new-event-title"
+                  v-model="eventSkeleton.title"
+                  type="text"
+                  name="new-event-title"
+                  required
+                  :placeholder="$t('entity.calendar.event.title')"
+                  :maxlength="120"
+                  pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
+                  class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+                >
+                <div class="mt-2 mb-1 text-xs opacity-50">
+                  {{ t('entity.calendar.event.patterns.title') }}
+                </div>
+              </div>
             </div>
           </div>
 
@@ -116,9 +122,12 @@ function handleCancel() {
               v-model="eventSkeleton.description"
               name="new-event-description"
               :placeholder="$t('entity.addDescription')"
-              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
               :maxlength="1200"
+              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
             />
+            <div class="mt-2 mb-1 text-xs opacity-50">
+              {{ t('entity.calendar.event.patterns.description') }}
+            </div>
           </div>
 
           <div class="col-span-2">
@@ -147,7 +156,10 @@ function handleCancel() {
               <PhTag size="18" weight="fill" />
 
               <div class="w-1/2">
-                <CalendarInputEventCategory v-model="eventSkeleton.category" placeholder="Ajouter une catégorie principale" />
+                <CalendarInputEventCategory
+                  v-model="eventSkeleton.category"
+                  :placeholder="$t('entity.category.addPrimary')"
+                />
               </div>
             </div>
           </div>
@@ -157,7 +169,7 @@ function handleCancel() {
               <PhTag size="18" weight="fill" />
 
               <div class="w-1/2">
-                <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" :placeholder="Ajouter des catégories secondaires" />
+                <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" placeholder="Ajouter des catégories secondaires" />
               </div>
             </div>
           </div> -->
@@ -166,15 +178,22 @@ function handleCancel() {
             <div class="flex items-center gap-4">
               <PhMapPinArea size="18" weight="fill" />
 
-              <input
-                id="new-event-location"
-                v-model="eventSkeleton.location"
-                type="text"
-                name="new-event-location"
-                :placeholder="$t('entity.calendar.event.addLocation')"
-                class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
-                :maxlength="160"
-              >
+              <div class="grow">
+                <input
+                  id="new-event-location"
+                  v-model="eventSkeleton.location"
+                  type="text"
+                  name="new-event-location"
+                  :placeholder="$t('entity.calendar.event.addLocation')"
+                  :maxlength="160"
+                  pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,160}"
+                  class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+                >
+
+                <div class="mt-2 mb-1 text-xs opacity-50">
+                  {{ t('entity.calendar.event.patterns.location') }}
+                </div>
+              </div>
             </div>
           </div>
 

i18n.config.ts

@@ -136,6 +136,11 @@ export default defineI18nConfig(() => ({
             addLocation: "Add a place",
             prevPage: "Previous page with events",
             nextPage: "Next page with events",
+            patterns: {
+              title: "Between 3 and 120 caracters, without special symbols, except & - ~ ()",
+              description: "1200 caracters max.",
+              location: "Between 3 and 160 caracters, without special symbols, except & - ~ ()",
+            },
             editDialog: {
               title: "Edit event",
               subtitle: "Update event data",
@@ -350,6 +355,11 @@ export default defineI18nConfig(() => ({
             addLocation: "Ajouter un endroit",
             prevPage: "Précédente page à évènements",
             nextPage: "Prochaine page à évènements",
+            patterns: {
+              title: "Entre 3 et 120 charactères, sans symboles spéciaux, sauf & - ~ ()",
+              description: "Maximum 1200 charactères.",
+              location: "Entre 3 et 160 charactères, sans symboles spéciaux, sauf & - ~ ()",
+            },
             editDialog: {
               title: "Modifier l'évènement",
               subtitle: "Mettre à jour les données de l'évènement",