diff --git a/packages/viewer/src/api/icon.api.ts b/packages/viewer/src/api/icon.api.ts
index 18df91957a..0a014b9f0f 100644
--- a/packages/viewer/src/api/icon.api.ts
+++ b/packages/viewer/src/api/icon.api.ts
@@ -3,12 +3,7 @@ import axios from 'axios'
 import { fromString } from 'ol/color'
 
 import { getViewerDedicatedServicesBaseUrl } from '@/config/baseUrl.config'
-import {
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    LARGE,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { type FeatureStyleColor, LARGE, RED } from '@/utils/featureStyleUtils'
 
 /**
  * Generate an icon URL from its template. If no iconScale is given, the default scale 1 will be
@@ -17,19 +12,18 @@ import {
  *
  * @returns A full URL to this icon on the service-icons backend
  */
-export function generateIconURL(
-    icon: DrawingIcon,
-    iconColor: FeatureStyleColor = RED,
-    iconSize: FeatureStyleSize = LARGE
-) {
+export function generateIconURL(icon: DrawingIcon, iconColor: FeatureStyleColor = RED) {
     const rgb = fromString(iconColor.fill)
-    return icon.imageTemplateURL
-        .replace('{icon_set_name}', icon.iconSetName)
-        .replace('{icon_name}', icon.name)
-        .replace('{icon_scale}', iconSize.iconScale + 'x')
-        .replace('{r}', `${rgb[0]}`)
-        .replace('{g}', `${rgb[1]}`)
-        .replace('{b}', `${rgb[2]}`)
+    return (
+        icon.imageTemplateURL
+            .replace('{icon_set_name}', icon.iconSetName)
+            .replace('{icon_name}', icon.name)
+            // we always use the LARGE icon scale and resize the icon with the <IconStyle><scale> property in KMLs
+            .replace('{icon_scale}', LARGE.iconScale + 'x')
+            .replace('{r}', `${rgb[0]}`)
+            .replace('{g}', `${rgb[1]}`)
+            .replace('{b}', `${rgb[2]}`)
+    )
 }
 
 /**
diff --git a/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue b/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue
index 7d19edc4d5..3829ba6368 100644
--- a/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue
+++ b/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue
@@ -2,8 +2,10 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import { MediaType } from '@/modules/infobox/DrawingStyleMediaTypes.enum'
-import TextInput, { type TextInputValidateResult } from '@/utils/components/TextInput.vue'
+import TextInput from '@/utils/components/TextInput.vue'
 import { isValidUrl } from '@/utils/utils'
 
 const { mediaType, urlLabel, descriptionLabel } = defineProps<{
@@ -17,8 +19,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const generatedMediaLink = ref<string | undefined>(undefined)
-const linkDescription = ref<string | undefined>(undefined)
+const generatedMediaLink = ref<string>()
+const linkDescription = ref<string>()
 const isFormValid = ref<boolean>(false)
 const activateValidation = ref<boolean>(false)
 
@@ -87,7 +89,7 @@ function validateForm(): boolean {
     return isFormValid.value
 }
 
-function onUrlValidate(result: TextInputValidateResult): void {
+function onUrlValidate(result: ValidationResult): void {
     isFormValid.value = result.valid
 }
 </script>
@@ -117,14 +119,14 @@ function onUrlValidate(result: TextInputValidateResult): void {
                 placeholder="paste_url"
                 :validate="validateUrl"
                 data-cy="drawing-style-media-url"
-                @keydown.enter="addLink()"
+                @keydown.enter="addLink"
                 @validate="onUrlValidate"
             >
                 <button
                     class="btn btn-default btn-outline-group rounded-0 rounded-end"
                     type="button"
                     data-cy="drawing-style-media-generate-button"
-                    @click="addLink()"
+                    @click="addLink"
                 >
                     {{ t('add') }}
                 </button>
diff --git a/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileLocalTab.vue b/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileLocalTab.vue
index c5a546b4f3..415e09d875 100644
--- a/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileLocalTab.vue
+++ b/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileLocalTab.vue
@@ -4,6 +4,8 @@ import type { ErrorMessage } from '@swissgeo/log/Message'
 import log from '@swissgeo/log'
 import { computed, ref } from 'vue'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
 import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
 import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
@@ -17,12 +19,12 @@ const { active = false } = defineProps<{
     active?: boolean
 }>()
 
+const selectedFile = defineModel<File | undefined>({ default: undefined })
+
 // Reactive data
 const loadingFile = ref(false)
-const selectedFile = ref<File | undefined>()
 const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
 const isFormValid = ref(false)
-const activateValidation = ref(false)
 const importSuccessMessage = ref('')
 
 const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
@@ -31,7 +33,6 @@ const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
 async function loadFile() {
     importSuccessMessage.value = ''
     errorFileLoadingMessage.value = undefined
-    activateValidation.value = true
     loadingFile.value = true
 
     if (isFormValid.value && selectedFile.value) {
@@ -52,8 +53,8 @@ async function loadFile() {
     loadingFile.value = false
 }
 
-function validateForm(valid: boolean) {
-    isFormValid.value = valid
+function validateForm(validation: ValidationResult) {
+    isFormValid.value = validation.valid
 }
 </script>
 
@@ -74,8 +75,7 @@ function validateForm(valid: boolean) {
             required
             :accepted-file-types="acceptedFileTypes"
             :placeholder="'no_file'"
-            :activate-validation="activateValidation"
-            :invalid-marker="!!errorFileLoadingMessage"
+            :force-invalid="!!errorFileLoadingMessage"
             :invalid-message="errorFileLoadingMessage?.msg"
             :invalid-message-extra-params="errorFileLoadingMessage?.params"
             :valid-message="importSuccessMessage"
diff --git a/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileOnlineTab.vue b/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileOnlineTab.vue
index 124ed77b56..63d438279f 100644
--- a/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileOnlineTab.vue
+++ b/packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileOnlineTab.vue
@@ -4,15 +4,13 @@ import { ErrorMessage, WarningMessage } from '@swissgeo/log/Message'
 import { type ComponentPublicInstance, computed, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 import type { ActionDispatcher } from '@/store/types'
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
 
 import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
 import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
 import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
 import useUIStore from '@/store/modules/ui'
-import TextInput, {
-    type TextInputExposed,
-    type TextInputValidateResult,
-} from '@/utils/components/TextInput.vue'
+import TextInput, { type TextInputExposed } from '@/utils/components/TextInput.vue'
 import { isValidUrl } from '@/utils/utils'
 
 const dispatcher: ActionDispatcher = {
@@ -27,14 +25,14 @@ const uiStore = useUIStore()
 
 const { handleFileSource } = useImportFile()
 
-// Reactive data
+const fileUrl = defineModel<string>({ default: '' })
+
 const isLoading = ref<boolean>(false)
-const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
-const fileUrl = ref<string>('')
 const importSuccessMessage = ref<string>('')
 const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
 const isFormValid = ref<boolean>(false)
-const activateValidation = ref<boolean>(false)
+
+const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
 
 const buttonState = computed<'loading' | 'default'>(() => (isLoading.value ? 'loading' : 'default'))
 
@@ -54,9 +52,7 @@ onMounted(() => {
     }
 })
 
-// Methods
-
-function validateUrl(url?: string): TextInputValidateResult {
+function validateUrl(url?: string): ValidationResult {
     if (!url) {
         return { valid: false, invalidMessage: 'no_url' }
     } else if (!isValidUrl(url)) {
@@ -66,12 +62,11 @@ function validateUrl(url?: string): TextInputValidateResult {
 }
 
 function validateForm() {
-    activateValidation.value = true
     return isFormValid.value
 }
 
-function onUrlValidate(result: TextInputValidateResult) {
-    isFormValid.value = result.valid
+function onUrlValidate(validation: ValidationResult) {
+    isFormValid.value = validation.valid
 }
 
 function onUrlChange() {
@@ -132,8 +127,7 @@ async function loadFile() {
                 required
                 class="mb-2"
                 placeholder="import_file_url_placeholder"
-                :activate-validation="activateValidation"
-                :invalid-marker="!!errorFileLoadingMessage"
+                :force-invalid="!!errorFileLoadingMessage"
                 :invalid-message="errorFileLoadingMessage?.msg"
                 :invalid-message-params="errorFileLoadingMessage?.params"
                 :valid-message="importSuccessMessage"
diff --git a/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue b/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue
index 7e32e9ded5..07bb259e64 100644
--- a/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue
+++ b/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue
@@ -6,6 +6,7 @@ import { computed, type ComputedRef, nextTick, ref, useTemplateRef, watch } from
 import { useI18n } from 'vue-i18n'
 
 import type { ActionDispatcher } from '@/store/types'
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
 
 import sendFeedback, { ATTACHMENT_MAX_SIZE, KML_MAX_SIZE } from '@/api/feedback.api'
 import { getKmlUrl } from '@/api/files.api'
@@ -84,7 +85,7 @@ const request = ref({
     completed: false,
 })
 const shortLink = ref('')
-const activateValidation = ref(false)
+const userHasTriedToSubmit = ref(false)
 const isMessageValid = ref(false)
 // by default attachment and email are valid as they are optional
 const isAttachmentValid = ref(true)
@@ -118,15 +119,10 @@ watch(
     { deep: true }
 )
 
-// Methods
-
-function validate() {
-    activateValidation.value = true
-    return isFormValid.value
-}
-
 async function sendReportProblem() {
-    if (!validate() && validationResult.value) {
+    userHasTriedToSubmit.value = true
+
+    if (!isFormValid.value && validationResult.value) {
         // scrolling down to make sure the message with validation result is visible to the user
         validationResult.value.scrollIntoView()
         return
@@ -168,7 +164,6 @@ async function sendReportProblem() {
 }
 
 function closeAndCleanForm() {
-    activateValidation.value = false
     showReportProblemForm.value = false
 
     // reset the state
@@ -183,16 +178,16 @@ function closeAndCleanForm() {
     }
 }
 
-function onTextValidate(valid: boolean) {
-    isMessageValid.value = valid
+function onTextValidate(validation: ValidationResult) {
+    isMessageValid.value = validation.valid
 }
 
-function onAttachmentValidate(valid: boolean) {
-    isAttachmentValid.value = valid
+function onAttachmentValidate(validation: ValidationResult) {
+    isAttachmentValid.value = validation.valid
 }
 
-function onEmailValidate(valid: boolean) {
-    isEmailValid.value = valid
+function onEmailValidate(validation: ValidationResult) {
+    isEmailValid.value = validation.valid
 }
 
 async function generateShortLink() {
@@ -282,7 +277,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                 class="my-2"
                 :class="{
                     'is-valid': feedback.category,
-                    'is-invalid': !feedback.category && activateValidation,
+                    'is-invalid': !feedback.category && userHasTriedToSubmit,
                 }"
                 @selectItem="selectItem"
             />
@@ -308,7 +303,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                     :disabled="request.pending"
                     required
                     data-cy="report-problem-text-area"
-                    :activate-validation="activateValidation"
+                    :validate-when-pristine="userHasTriedToSubmit"
                     invalid-message="feedback_empty_warning"
                     @validate="onTextValidate"
                 />
@@ -351,7 +346,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                     label="feedback_mail"
                     :disabled="request.pending"
                     :description="'no_email_feedback'"
-                    :activate-validation="activateValidation"
+                    :validate-when-pristine="userHasTriedToSubmit"
                     data-cy="report-problem-email"
                     @validate="onEmailValidate"
                 />
@@ -363,7 +358,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                     label="feedback_attachment"
                     :accepted-file-types="acceptedFileTypes"
                     :placeholder="'feedback_placeholder'"
-                    :activate-validation="activateValidation"
+                    :validate-when-pristine="userHasTriedToSubmit"
                     :disabled="request.pending"
                     :max-file-size="ATTACHMENT_MAX_SIZE"
                     data-cy="report-problem-file"
@@ -388,7 +383,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
             </div>
             <SendActionButtons
                 class="text-end"
-                :class="{ 'is-invalid': !isFormValid && activateValidation }"
+                :class="{ 'is-invalid': !isFormValid && userHasTriedToSubmit }"
                 :is-disabled="request.pending"
                 :is-pending="request.pending"
                 @send="sendReportProblem"
diff --git a/packages/viewer/src/modules/menu/components/help/feedback/FeedbackButton.vue b/packages/viewer/src/modules/menu/components/help/feedback/FeedbackButton.vue
index 91d8594b3b..2f097fbda5 100644
--- a/packages/viewer/src/modules/menu/components/help/feedback/FeedbackButton.vue
+++ b/packages/viewer/src/modules/menu/components/help/feedback/FeedbackButton.vue
@@ -3,6 +3,8 @@ import log from '@swissgeo/log'
 import { computed, nextTick, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import sendFeedbackApi from '@/api/feedback.api'
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
 import SendActionButtons from '@/modules/menu/components/help/common/SendActionButtons.vue'
@@ -111,12 +113,12 @@ function closeAndCleanForm() {
     request.value.completed = false
 }
 
-function onTextValidate(valid: boolean) {
-    isMessageValid.value = valid
+function onTextValidate(validation: ValidationResult) {
+    isMessageValid.value = validation.valid
 }
 
-function onEmailValidate(valid: boolean) {
-    isEmailValid.value = valid
+function onEmailValidate(validation: ValidationResult) {
+    isEmailValid.value = validation.valid
 }
 </script>
 
diff --git a/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts b/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts
index 96983a23f5..db5da37961 100644
--- a/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts
@@ -43,7 +43,6 @@ export default async function closeDrawing(this: DrawingStore, dispatcher: Actio
             await debounceSaveDrawing({ debounceTime: 0, retryOnError: false })
         }
 
-
         if (this.layer.config) {
             // flagging the layer as not edited anymore (not displayed on the map by the drawing module anymore)
             if (isOnlineMode(this.onlineMode)) {
diff --git a/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts b/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts
index bad7925d92..8cc71b62c2 100644
--- a/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts
@@ -8,13 +8,7 @@ import { generateIconURL } from '@/api/icon.api'
 import { DrawingSaveState } from '@/store/modules/drawing/types/DrawingSaveState.enum'
 import debounceSaveDrawing from '@/store/modules/drawing/utils/debounceSaveDrawing'
 import useProfileStore from '@/store/modules/profile'
-import {
-    calculateTextOffset,
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    MEDIUM,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { calculateTextOffset } from '@/utils/featureStyleUtils'
 
 export default function updateCurrentDrawingFeature(
     this: DrawingStore,
@@ -24,21 +18,24 @@ export default function updateCurrentDrawingFeature(
     if (this.feature.current) {
         this.save.state = DrawingSaveState.UnsavedChanges
 
-        let needIconUrlRefresh = false
-
         Object.assign(this.feature.current, valuesToUpdate)
 
         // keeping values as preferred, if present, so that the next time the user draws, the values are used
         if (valuesToUpdate.iconSize) {
             this.edit.preferred.size = valuesToUpdate.iconSize
-            needIconUrlRefresh = true
         }
         if (valuesToUpdate.textSize) {
             this.edit.preferred.size = valuesToUpdate.textSize
         }
         if (valuesToUpdate.fillColor) {
             this.edit.preferred.color = valuesToUpdate.fillColor
-            needIconUrlRefresh = true
+            // refreshing the icon color if present
+            if (this.feature.current.icon) {
+                this.feature.current.icon.imageURL = generateIconURL(
+                    this.feature.current.icon,
+                    valuesToUpdate.fillColor
+                )
+            }
         }
         if (valuesToUpdate.textColor) {
             this.edit.preferred.color = valuesToUpdate.textColor
@@ -62,18 +59,6 @@ export default function updateCurrentDrawingFeature(
             }
         }
 
-        if (this.feature.current.icon && needIconUrlRefresh) {
-            const newIconSize: FeatureStyleSize =
-                valuesToUpdate.iconSize ?? this.feature.current.iconSize ?? MEDIUM
-            const newIconColor: FeatureStyleColor =
-                valuesToUpdate.fillColor ?? this.feature.current.fillColor ?? RED
-            this.feature.current.icon.imageURL = generateIconURL(
-                this.feature.current.icon,
-                newIconColor,
-                newIconSize
-            )
-        }
-
         const profileStore = useProfileStore()
         // updating the profile feature if the currently drawn feature is the profile feature
         if (profileStore.feature?.id === this.feature.current.id) {
diff --git a/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts b/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts
index db07e1d2d4..dc38e84260 100644
--- a/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts
+++ b/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts
@@ -12,7 +12,7 @@ import type { EditableFeature } from '@/api/features.api'
 import { type DrawingIconSet, generateIconURL } from '@/api/icon.api'
 import { getServiceKmlBaseUrl } from '@/config/baseUrl.config'
 import { fakeIconSets } from '@/utils/__tests__/legacyKmlUtils.spec'
-import { BLUE, EXTRA_LARGE } from '@/utils/featureStyleUtils'
+import { BLUE } from '@/utils/featureStyleUtils'
 import {
     getIcon,
     getKmlExtent,
@@ -350,7 +350,7 @@ describe('Test KML utils', () => {
                 'https://fake.image.url/api/icons/sets/default/icons/001-marker@1x-255,0,0.png'
             )
         })
-        it('get icon with standard arguments from the set with scale and color', () => {
+        it('get icon with standard arguments from the set with color', () => {
             const icon = getIcon(
                 {
                     set: 'default',
@@ -363,8 +363,8 @@ describe('Test KML utils', () => {
             expect(icon).toBeDefined()
             expect(icon!.name).to.be.equal('001-marker')
             expect(icon!.iconSetName).to.be.equal('default')
-            expect(generateIconURL(icon!, BLUE, EXTRA_LARGE)).to.be.equal(
-                'https://fake.image.url/api/icons/sets/default/icons/001-marker@1.25x-0,0,255.png'
+            expect(generateIconURL(icon!, BLUE)).to.be.equal(
+                'https://fake.image.url/api/icons/sets/default/icons/001-marker@1x-0,0,255.png'
             )
         })
         it('get icon with standard arguments from the babs set', () => {
diff --git a/packages/viewer/src/utils/components/EmailInput.vue b/packages/viewer/src/utils/components/EmailInput.vue
index 9857883d09..44908e100e 100644
--- a/packages/viewer/src/utils/components/EmailInput.vue
+++ b/packages/viewer/src/utils/components/EmailInput.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { toRefs, useTemplateRef } from 'vue'
+import { toRef, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
-import { useFieldValidation } from '@/utils/composables/useFieldValidation'
+import {
+    useFieldValidation,
+    type ValidateFunction,
+    type ValidationResult,
+} from '@/utils/composables/useFieldValidation'
 import { isValidEmail } from '@/utils/utils'
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
     /** Label to add above the field */
     label?: string
     /** Description to add below the input */
@@ -21,6 +25,7 @@ const props = withDefaults(defineProps<{
     placeholder?: string
     /** Field is required and will be marked as invalid if empty */
     required?: boolean
+    requiredInvalidMessage?: string
     /**
      * Mark the field as valid
      *
@@ -29,7 +34,7 @@ const props = withDefaults(defineProps<{
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    validMarker?: boolean | undefined
+    forceValid?: boolean
     /**
      * Valid message Message that will be added in green below the field once the validation has
      * been done and the field is valid.
@@ -43,7 +48,7 @@ const props = withDefaults(defineProps<{
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    invalidMarker?: boolean | undefined
+    forceInvalid?: boolean
     /**
      * Invalid message Message that will be added in red below the field once the validation has
      * been done and the field is invalid.
@@ -52,13 +57,7 @@ const props = withDefaults(defineProps<{
      * file too big or required empty file)
      */
     invalidMessage?: string
-    /**
-     * Mark the field has validated.
-     *
-     * As long as the flag is false, no validation is run and no validation marks are set. Also the
-     * props is-invalid and is-valid are ignored.
-     */
-    activateValidation?: boolean
+    validateWhenPristine?: boolean
     /**
      * Validate function to run when the input changes The function should return an object of type
      * `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
@@ -66,50 +65,65 @@ const props = withDefaults(defineProps<{
      *
      * NOTE: this function is called each time the field is modified
      */
-    validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
+    validate?: ValidateFunction<string>
     dataCy?: string
-}>(), {
-    validMarker: undefined,
-    invalidMarker: undefined,
-})
-
+}>()
 const {
-    label,
-    description,
-    disabled,
-    placeholder,
-    dataCy,
-} = toRefs(props)
+    label = '',
+    description = '',
+    disabled = false,
+    placeholder = '',
+    validate,
+    dataCy = '',
+} = props
 
-const inputEmailId = useComponentUniqueId('email-input')
+// the props passed down to the usFieldValidation need to be converted to refs to keep the reactivity
+const required = toRef(props, 'required', false)
+const requiredInvalidMessage = toRef(props, 'requiredInvalidMessage', 'no_email')
+const forceValid = toRef(props, 'forceValid', false)
+const forceInvalid = toRef(props, 'forceInvalid', false)
+const validFieldMessage = toRef(props, 'validMessage', '')
+const invalidFieldMessage = toRef(props, 'invalidMessage', 'invalid_email')
+const validateWhenPristine = toRef(props, 'validateWhenPristine', false)
 
+const inputEmailId = useComponentUniqueId('email-input')
 const model = defineModel<string>({ default: '' })
-const emits = defineEmits(['change', 'validate', 'focusin', 'focusout', 'keydown.enter'])
+
+const emits = defineEmits<{
+    change: [void]
+    validate: [validation: ValidationResult]
+    focusin: [void]
+    focusout: [void]
+    'keydown.enter': [void]
+}>()
 const { t } = useI18n()
 
-const {
-    value,
-    validMarker: computedValidMarker,
-    invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
-    invalidMessage: computedInvalidMessage,
-    required: computedRequired,
-    onFocus,
-} = useFieldValidation(
-    props,
+const { validation, onFocus } = useFieldValidation<string>({
     model,
-    emits as (_event: string, ..._args: unknown[]) => void,
-    {
-        customValidate: validateEmail,
-        requiredInvalidMessage: 'no_email',
-    }
-)
+
+    required,
+    requiredInvalidMessage,
+
+    validateWhenPristine,
+
+    forceValid,
+    validFieldMessage,
+
+    forceInvalid,
+    invalidFieldMessage,
+
+    emits,
+    validate: validateEmail,
+})
 
 const emailInputElement = useTemplateRef<HTMLInputElement>('emailInputElement')
 
-function validateEmail() {
-    if (value.value && !isValidEmail(value.value)) {
-        return { valid: false, invalidMessage: 'invalid_email' }
+function validateEmail(email?: string): ValidationResult {
+    if (email && !isValidEmail(email)) {
+        return { valid: false, invalidMessage: invalidFieldMessage.value }
+    }
+    if (validate) {
+        return validate(email)
     }
     return { valid: true, invalidMessage: '' }
 }
@@ -129,7 +143,7 @@ defineExpose({ focus })
         <label
             v-if="label"
             class="mb-2"
-            :class="{ 'fw-bolder': computedRequired }"
+            :class="{ 'fw-bolder': required }"
             :for="inputEmailId"
             data-cy="email-input-label"
         >
@@ -138,15 +152,15 @@ defineExpose({ focus })
         <input
             :id="inputEmailId"
             ref="emailInputElement"
-            v-model="value"
+            v-model="model"
             :disabled="disabled"
             :class="{
-                'is-invalid': computedInvalidMarker,
-                'is-valid': computedValidMarker,
+                'is-invalid': validation && !validation.valid,
+                'is-valid': validation && validation.valid,
             }"
             type="email"
             class="form-control"
-            :required="computedRequired"
+            :required="required"
             :placeholder="placeholder ? t(placeholder) : ''"
             data-cy="email-input"
             @focusin="onFocus($event, true)"
@@ -154,18 +168,18 @@ defineExpose({ focus })
             @keydown.enter="emits('keydown.enter')"
         />
         <div
-            v-if="computedInvalidMessage"
+            v-if="validation?.invalidMessage"
             class="invalid-feedback"
             data-cy="email-input-invalid-feedback"
         >
-            {{ t(computedInvalidMessage) }}
+            {{ t(validation.invalidMessage) }}
         </div>
         <div
-            v-if="computedValidMessage"
+            v-if="validMessage"
             class="valid-feedback"
             data-cy="email-input-valid-feedback"
         >
-            {{ t(computedValidMessage) }}
+            {{ t(validMessage) }}
         </div>
         <div
             v-if="description"
diff --git a/packages/viewer/src/utils/components/FileInput.vue b/packages/viewer/src/utils/components/FileInput.vue
index 95036c6c8c..8ba2d477ba 100644
--- a/packages/viewer/src/utils/components/FileInput.vue
+++ b/packages/viewer/src/utils/components/FileInput.vue
@@ -7,30 +7,18 @@
  * NOTE: the validation only happens when the prop activate-validation is set to true, this allow to
  * validate all fields of a form at once.
  */
-import { computed, useTemplateRef } from 'vue'
+import { computed, toRef, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
-import { useFieldValidation } from '@/utils/composables/useFieldValidation'
+import {
+    useFieldValidation,
+    type ValidateFunction,
+    type ValidationResult,
+} from '@/utils/composables/useFieldValidation'
 import { humanFileSize } from '@/utils/utils'
 
-const {
-    label = '',
-    description = '',
-    disabled = false,
-    acceptedFileTypes = [],
-    maxFileSize = 250 * 1024 * 1024, // 250 MB
-    placeholder = '',
-    required = false,
-    validMarker = undefined,
-    validMessage = '',
-    invalidMarker = undefined,
-    invalidMessage = '',
-    invalidMessageExtraParams = {},
-    activateValidation = false,
-    validate = undefined,
-    dataCy = '',
-} = defineProps<{
+const props = defineProps<{
     /** Label to add above the field */
     label?: string
     /** Description to add below the input */
@@ -40,7 +28,7 @@ const {
     /**
      * Accepted file types
      *
-     * List of file extension that are accepted. If the file doesn't match the type it will be
+     * List of file extensions that are accepted. If the file doesn't match the type, it will be
      * rejected with a proper message and the field will be marked as invalid.
      */
     acceptedFileTypes?: string[]
@@ -54,15 +42,16 @@ const {
     placeholder?: string
     /** Field is required and will be marked as invalid if empty */
     required?: boolean
+    requiredInvalidMessage?: string
     /**
-     * Mark the field as valid
+     * Force the field as valid
      *
      * This can be used if the field requires some external validation. When not set or set to
      * undefined this props is ignored.
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    validMarker?: boolean | undefined
+    forceValid?: boolean
     /**
      * Valid message Message that will be added in green below the field once the validation has
      * been done and the field is valid.
@@ -76,7 +65,7 @@ const {
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    invalidMarker?: boolean | undefined
+    forceInvalid?: boolean
     /**
      * Invalid message Message that will be added in red below the field once the validation has
      * been done and the field is invalid.
@@ -91,13 +80,7 @@ const {
      * the i18n call.
      */
     invalidMessageExtraParams?: Record<string, unknown>
-    /**
-     * Mark the field has validated.
-     *
-     * As long as the flag is false, no validation is run and no validation marks are set. Also the
-     * props is-invalid and is-valid are ignored.
-     */
-    activateValidation?: boolean
+    validateWhenPristine?: boolean
     /**
      * Validate function to run when the input changes The function should return an object of type
      * `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
@@ -105,9 +88,28 @@ const {
      *
      * NOTE: this function is called each time the field is modified
      */
-    validate?: ((_value?: File) => { valid: boolean; invalidMessage: string }) | undefined
+    validate?: ValidateFunction<File>
     dataCy?: string
 }>()
+const {
+    label = '',
+    description = '',
+    disabled = false,
+    acceptedFileTypes = [],
+    maxFileSize = 250 * 1024 * 1024, // 250 MB
+    placeholder = '',
+    validate,
+    dataCy = '',
+} = props
+
+// the props passed down to the usFieldValidation need to be converted to refs to keep the reactivity
+const required = toRef(props, 'required', false)
+const requiredInvalidMessage = toRef(props, 'requiredInvalidMessage', 'no_file')
+const forceValid = toRef(props, 'forceValid', false)
+const forceInvalid = toRef(props, 'forceInvalid', false)
+const validFieldMessage = toRef(props, 'validMessage', '')
+const invalidFieldMessage = toRef(props, 'invalidMessage', '')
+const validateWhenPristine = toRef(props, 'validateWhenPristine', false)
 
 // On each component creation set the current component unique ID
 const inputFileId = useComponentUniqueId('file-input')
@@ -115,8 +117,9 @@ const inputFileId = useComponentUniqueId('file-input')
 const { t } = useI18n()
 const model = defineModel<File | undefined>({ default: undefined })
 const emits = defineEmits<{
-    change: []
-    validate: [isValid: boolean]
+    change: [void]
+    fileSelected: [file?: File]
+    validate: [validation: ValidationResult]
 }>()
 
 // Reactive data
@@ -126,8 +129,7 @@ const inputLocalFile = useTemplateRef<HTMLInputElement>('inputLocalFile')
 const maxFileSizeHuman = computed(() => humanFileSize(maxFileSize))
 
 // Validation logic for file-specific checks
-function validateFile(): { valid: boolean; invalidMessage: string } {
-    const file = model.value
+function validateFile(file?: File): ValidationResult {
     if (
         file &&
         acceptedFileTypes?.length > 0 &&
@@ -140,54 +142,43 @@ function validateFile(): { valid: boolean; invalidMessage: string } {
     if (file && file.size > maxFileSize) {
         return { valid: false, invalidMessage: 'file_too_large' }
     }
+    if (validate) {
+        return validate(file)
+    }
     return {
         valid: true,
         invalidMessage: '',
     }
 }
 
-// Use the field validation composable with properly typed props
-const validationProps = {
+const { validation } = useFieldValidation<File>({
+    model,
+
     required,
-    validMarker,
-    validMessage,
-    invalidMarker,
-    invalidMessage,
-    activateValidation,
-    validate,
-}
+    requiredInvalidMessage,
 
-const {
-    value,
-    validMarker: computedValidMarker,
-    invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
-    invalidMessage: computedInvalidMessage,
-} = useFieldValidation<File>(
-    validationProps,
-    model,
-    (event: string, ...args: unknown[]) => {
-        if (event === 'change') {
-            emits('change')
-        } else if (event === 'validate') {
-            emits('validate', args[0] as boolean)
-        }
-    },
-    {
-        customValidate: validateFile,
-        requiredInvalidMessage: 'no_file',
-    }
-)
+    validateWhenPristine,
+
+    forceValid,
+    validFieldMessage,
+
+    forceInvalid,
+    invalidFieldMessage,
+
+    emits,
+    validate: validateFile,
+})
 
 const filePathInfo = computed(() =>
-    value.value ? `${value.value.name}, ${value.value.size / 1000} kb` : ''
+    model.value ? `${model.value.name}, ${model.value.size / 1000} kb` : ''
 )
 
 // Methods
 function onFileSelected(evt: Event): void {
     const target = evt.target as HTMLInputElement
     const file = target?.files?.[0] ?? undefined
-    value.value = file
+    model.value = file
+    emits('fileSelected', file)
 }
 </script>
 
@@ -230,7 +221,10 @@ function onFileSelected(evt: Event): void {
             <input
                 type="text"
                 class="form-control import-input rounded-end local-file-input"
-                :class="{ 'is-valid': computedValidMarker, 'is-invalid': computedInvalidMarker }"
+                :class="{
+                    'is-valid': validation && validation.valid,
+                    'is-invalid': validation && !validation.valid,
+                }"
                 :placeholder="placeholder ? t(placeholder) : ''"
                 :value="filePathInfo"
                 readonly
@@ -241,12 +235,12 @@ function onFileSelected(evt: Event): void {
                 @click="inputLocalFile?.click()"
             />
             <div
-                v-if="computedInvalidMessage"
+                v-if="validation?.invalidMessage"
                 class="invalid-feedback"
                 data-cy="file-input-invalid-feedback"
             >
                 {{
-                    t(computedInvalidMessage, {
+                    t(validation.invalidMessage, {
                         maxFileSize: maxFileSizeHuman,
                         allowedFormats: acceptedFileTypes.join(', '),
                         ...invalidMessageExtraParams,
@@ -254,11 +248,11 @@ function onFileSelected(evt: Event): void {
                 }}
             </div>
             <div
-                v-if="computedValidMessage"
+                v-if="validMessage"
                 class="valid-feedback"
                 data-cy="file-input-valid-feedback"
             >
-                {{ t(computedValidMessage) }}
+                {{ t(validMessage) }}
             </div>
         </div>
         <div
diff --git a/packages/viewer/src/utils/components/TextAreaInput.vue b/packages/viewer/src/utils/components/TextAreaInput.vue
index e955d94808..c60f2d9a86 100644
--- a/packages/viewer/src/utils/components/TextAreaInput.vue
+++ b/packages/viewer/src/utils/components/TextAreaInput.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { toRefs, useTemplateRef } from 'vue'
+import { toRef, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
-import { useFieldValidation } from '@/utils/composables/useFieldValidation'
+import {
+    useFieldValidation,
+    type ValidateFunction,
+    type ValidationResult,
+} from '@/utils/composables/useFieldValidation'
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
     /** Label to add above the field */
     label?: string
     /** Description to add below the input */
@@ -28,7 +32,7 @@ const props = withDefaults(defineProps<{
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    validMarker?: boolean | undefined
+    forceValid?: boolean
     /**
      * Valid message Message that will be added in green below the field once the validation has
      * been done and the field is valid.
@@ -42,7 +46,7 @@ const props = withDefaults(defineProps<{
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    invalidMarker?: boolean | undefined
+    forceInvalid?: boolean
     /**
      * Invalid message Message that will be added in red below the field once the validation has
      * been done and the field is invalid.
@@ -51,13 +55,7 @@ const props = withDefaults(defineProps<{
      * file too big or required empty file)
      */
     invalidMessage?: string
-    /**
-     * Mark the field has validated.
-     *
-     * As long as the flag is false, no validation is run and no validation marks are set. Also the
-     * props is-invalid and is-valid are ignored.
-     */
-    activateValidation?: boolean
+    validateWhenPristine?: boolean
     /**
      * Validate function to run when the input changes The function should return an object of type
      * `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
@@ -65,42 +63,57 @@ const props = withDefaults(defineProps<{
      *
      * NOTE: this function is called each time the field is modified
      */
-    validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
+    validate?: ValidateFunction<string>
     dataCy?: string
-}>(), {
-    validMarker: undefined,
-    invalidMarker: undefined,
-})
-
+}>()
 const {
-    label,
-    description,
-    disabled,
-    placeholder,
-    dataCy,
-} = toRefs(props)
+    label = '',
+    description = '',
+    disabled = false,
+    placeholder = '',
+    validate,
+    dataCy = '',
+} = props
 
-const textAreaInputId = useComponentUniqueId('text-area-input')
+// the props passed down to the usFieldValidation need to be converted to refs to keep the reactivity
+const required = toRef(props, 'required', false)
+const forceValid = toRef(props, 'forceValid', false)
+const forceInvalid = toRef(props, 'forceInvalid', false)
+const validFieldMessage = toRef(props, 'validMessage', '')
+const invalidFieldMessage = toRef(props, 'invalidMessage', '')
+const validateWhenPristine = toRef(props, 'validateWhenPristine', false)
 
+const textAreaInputId = useComponentUniqueId('text-area-input')
 const model = defineModel<string>({ default: '' })
-const emits = defineEmits(['change', 'validate', 'focusin', 'focusout', 'keydown.enter'])
+
+const emits = defineEmits<{
+    change: [value?: string]
+    validate: [validation: ValidationResult]
+    focusin: [event: Event]
+    focusout: [event: Event]
+    'keydown.enter': [event: KeyboardEvent]
+}>()
+
 const { t } = useI18n()
 
 const textAreaElement = useTemplateRef('textAreaElement')
 
-const {
-    value,
-    validMarker: computedValidMarker,
-    invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
-    invalidMessage: computedInvalidMessage,
-    onFocus,
-    required: computedRequired,
-} = useFieldValidation(
-    props,
+const { validation, onFocus } = useFieldValidation<string>({
     model,
-    emits as (_event: string, ..._args: unknown[]) => void
-)
+
+    required,
+
+    validateWhenPristine,
+
+    forceValid,
+    validFieldMessage,
+
+    forceInvalid,
+    invalidFieldMessage,
+
+    validate,
+    emits,
+})
 
 function focus(): void {
     textAreaElement.value?.focus()
@@ -117,7 +130,7 @@ defineExpose({ focus })
         <label
             v-if="label"
             class="mb-2"
-            :class="{ 'fw-bolder': computedRequired }"
+            :class="{ 'fw-bolder': required }"
             :for="textAreaInputId"
             data-cy="text-area-input-label"
         >
@@ -126,33 +139,33 @@ defineExpose({ focus })
         <textarea
             :id="textAreaInputId"
             ref="textAreaElement"
-            v-model="value"
+            v-model="model"
             :disabled="disabled"
-            :required="computedRequired"
+            :required="required"
             :class="{
-                'is-invalid': computedInvalidMarker,
-                'is-valid': computedValidMarker,
+                'is-invalid': validation && !validation.valid,
+                'is-valid': validation && validation.valid,
             }"
             class="form-control"
             :placeholder="placeholder ? t(placeholder) : ''"
             data-cy="text-area-input"
             @focusin="onFocus($event, true)"
             @focusout="onFocus($event, false)"
-            @keydown.enter="emits('keydown.enter')"
+            @keydown.enter="(e) => emits('keydown.enter', e)"
         />
         <div
-            v-if="computedInvalidMessage"
+            v-if="validation?.invalidMessage"
             class="invalid-feedback"
             data-cy="text-area-input-invalid-feedback"
         >
-            {{ t(computedInvalidMessage) }}
+            {{ t(validation.invalidMessage) }}
         </div>
         <div
-            v-if="computedValidMessage"
+            v-if="validMessage"
             class="valid-feedback"
             data-cy="text-area-input-valid-feedback"
         >
-            {{ t(computedValidMessage) }}
+            {{ t(validMessage) }}
         </div>
         <div
             v-if="description"
diff --git a/packages/viewer/src/utils/components/TextInput.vue b/packages/viewer/src/utils/components/TextInput.vue
index d25f67ba54..8d69a5b6b4 100644
--- a/packages/viewer/src/utils/components/TextInput.vue
+++ b/packages/viewer/src/utils/components/TextInput.vue
@@ -1,37 +1,25 @@
 <script setup lang="ts">
 /** Input with clear button component */
-import { nextTick, ref, useSlots, useTemplateRef } from 'vue'
+
+import type { Ref } from 'vue'
+import type { NamedValue } from 'vue-i18n'
+
+import { computed, nextTick, ref, toRef, useSlots, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
-import { useFieldValidation } from '@/utils/composables/useFieldValidation'
+import {
+    useFieldValidation,
+    type ValidateFunction,
+    type ValidationResult,
+} from '@/utils/composables/useFieldValidation'
 
 export interface TextInputExposed {
+    validation: Ref<ValidationResult | undefined>
     focus: () => void
 }
 
-export interface TextInputValidateResult {
-    valid: boolean
-    invalidMessage: string
-}
-
-export type TextInputValidateFunction = (_value?: string) => TextInputValidateResult
-
-const {
-    label = '',
-    description = '',
-    disabled = false,
-    placeholder = '',
-    required = false,
-    validMarker = undefined,
-    validMessage = '',
-    invalidMarker = undefined,
-    invalidMessage = '',
-    invalidMessageParams = undefined,
-    activateValidation = false,
-    validate = undefined,
-    dataCy = '',
-} = defineProps<{
+const props = defineProps<{
     /** Label to add above the field */
     label?: string
     /** Description to add below the input */
@@ -54,21 +42,21 @@ const {
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    validMarker?: boolean
+    forceValid?: boolean
     /**
      * Valid message that will be added in green below the field once the validation has been done
      * and the field is valid.
      */
     validMessage?: string
     /**
-     * Mark the field as invalid
+     * Force the field as valid
      *
      * This can be used if the field requires some external validation. When not set or set to
      * undefined this props is ignored.
      *
      * NOTE: this props is ignored when activate-validation is false
      */
-    invalidMarker?: boolean
+    forceInvalid?: boolean
     /**
      * Invalid message that will be added in red below the field once the validation has been done
      * and the field is invalid.
@@ -81,14 +69,8 @@ const {
      * Parameters for replacing any placeholder within an invalid message translated text (will be
      * passed to Vue I18N when translating the invalid message).
      */
-    invalidMessageParams?: Record<string, unknown>
-    /**
-     * Mark the field has validated.
-     *
-     * As long as the flag is false, no validation is run and no validation marks are set. Also the
-     * props is-invalid and is-valid are ignored.
-     */
-    activateValidation?: boolean
+    invalidMessageParams?: NamedValue
+    validateWhenPristine?: boolean
     /**
      * Validate function to run when the input changes The function should return an object of type
      * `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
@@ -96,10 +78,28 @@ const {
      *
      * NOTE: this function is called each time the field is modified
      */
-    validate?: TextInputValidateFunction
+    validate?: ValidateFunction<string>
     dataCy?: string
 }>()
 
+const {
+    label = '',
+    description = '',
+    disabled = false,
+    placeholder = '',
+    invalidMessageParams,
+    validate,
+    dataCy = '',
+} = props
+
+// the props passed down to the usFieldValidation need to be converted to refs to keep the reactivity
+const required = toRef(props, 'required', false)
+const forceValid = toRef(props, 'forceValid', false)
+const forceInvalid = toRef(props, 'forceInvalid', false)
+const validFieldMessage = toRef(props, 'validMessage', '')
+const invalidFieldMessage = toRef(props, 'invalidMessage', '')
+const validateWhenPristine = toRef(props, 'validateWhenPristine', false)
+
 // On each component creation set the current component unique ID
 const clearButtonId = useComponentUniqueId('button-addon-clear')
 const textInputId = useComponentUniqueId('text-input')
@@ -107,47 +107,52 @@ const textInputId = useComponentUniqueId('text-input')
 const model = defineModel<string>({ default: '' })
 const emits = defineEmits<{
     change: [value: string]
-    validate: [result: TextInputValidateResult]
+    validate: [result: ValidationResult]
     focusin: []
     focusout: []
     clear: []
     'keydown.enter': []
 }>()
 
-const validationProps = {
+const { validation, onFocus } = useFieldValidation<string>({
+    model,
+
     required,
-    validMarker,
-    validMessage,
-    invalidMarker,
-    invalidMessage,
-    activateValidation,
-    validate,
-}
 
-const {
-    value,
-    validMarker: computedValidMarker,
-    invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
-    invalidMessage: computedInvalidMessage,
-    onFocus,
-    required: computedRequired,
-} = useFieldValidation(
-    validationProps,
-    model,
-    emits as (_event: string, ..._args: unknown[]) => void
-)
+    validateWhenPristine,
+
+    forceValid,
+    validFieldMessage,
+
+    forceInvalid,
+    invalidFieldMessage,
+
+    emits,
+    validate,
+})
 
 const { t } = useI18n()
 const slots = useSlots()
 
-const inputElement = useTemplateRef('inputElement')
-const error = ref('')
+const inputElement = useTemplateRef<HTMLInputElement>('inputElement')
+const error = ref<string>('')
+
+const translatedInvalidMessage = computed<string | undefined>(() => {
+    if (validation.value?.invalidMessage) {
+        if (invalidMessageParams) {
+            return t(validation.value.invalidMessage, invalidMessageParams)
+        }
+        return t(validation.value.invalidMessage)
+    }
+    return undefined
+})
 
-function onClearInput(): void {
-    value.value = ''
+function onClearInput(event: Event): void {
+    model.value = ''
     error.value = ''
     inputElement.value?.focus()
+    // stopping the event here so that it won't close a modal window if used inside it.
+    event.stopPropagation()
     emits('clear')
 }
 
@@ -155,7 +160,7 @@ function focus(): void {
     void nextTick(() => inputElement.value?.focus())
 }
 
-defineExpose<TextInputExposed>({ focus })
+defineExpose<TextInputExposed>({ validation, focus })
 </script>
 
 <template>
@@ -166,7 +171,7 @@ defineExpose<TextInputExposed>({ focus })
         <label
             v-if="label"
             class="mb-2"
-            :class="{ 'fw-bolder': computedRequired }"
+            :class="{ 'fw-bolder': required }"
             :for="textInputId"
             data-cy="text-input-label"
         >
@@ -176,15 +181,15 @@ defineExpose<TextInputExposed>({ focus })
             <input
                 :id="textInputId"
                 ref="inputElement"
-                v-model="value"
+                v-model="model"
                 type="text"
                 :disabled="disabled"
-                :required="computedRequired"
+                :required="required"
                 class="form-control text-truncate"
                 :class="{
-                    'rounded-end': !value?.length && !slots?.default,
-                    'is-invalid': computedInvalidMarker,
-                    'is-valid': computedValidMarker,
+                    'rounded-end': !model?.length && !slots?.default,
+                    'is-invalid': validation && !validation.valid,
+                    'is-valid': validation && validation.valid,
                 }"
                 :aria-describedby="clearButtonId"
                 :placeholder="placeholder ? t(placeholder) : ''"
@@ -194,7 +199,7 @@ defineExpose<TextInputExposed>({ focus })
                 @keydown.enter="emits('keydown.enter')"
             />
             <button
-                v-if="value && value.length > 0"
+                v-if="model.length > 0"
                 :id="clearButtonId"
                 class="btn btn-outline-group rounded-0"
                 :class="{ 'rounded-end': !slots?.default }"
@@ -206,18 +211,18 @@ defineExpose<TextInputExposed>({ focus })
             </button>
             <slot />
             <div
-                v-if="computedInvalidMessage"
+                v-if="translatedInvalidMessage"
                 class="invalid-feedback"
                 data-cy="text-input-invalid-feedback"
             >
-                {{ t(computedInvalidMessage, invalidMessageParams ?? {}) }}
+                {{ translatedInvalidMessage }}
             </div>
             <div
-                v-if="computedValidMessage"
+                v-if="validMessage"
                 class="valid-feedback"
                 data-cy="text-input-valid-feedback"
             >
-                {{ t(computedValidMessage) }}
+                {{ t(validMessage) }}
             </div>
         </div>
         <div
diff --git a/packages/viewer/src/utils/composables/useFieldValidation.ts b/packages/viewer/src/utils/composables/useFieldValidation.ts
index c2793fad7a..602af5c282 100644
--- a/packages/viewer/src/utils/composables/useFieldValidation.ts
+++ b/packages/viewer/src/utils/composables/useFieldValidation.ts
@@ -1,98 +1,110 @@
-import type { ComputedRef, Ref } from 'vue'
-
-import { computed, onMounted, ref, toRef, watch } from 'vue'
+import {
+    computed,
+    type MaybeRefOrGetter,
+    type Ref,
+    ref,
+    toValue,
+    unref,
+    watch,
+    watchEffect,
+} from 'vue'
+
+export type FieldValidationTypes = string | File
 
 export interface ValidationResult {
     valid: boolean
     invalidMessage: string
 }
 
-export type ValidateFunction<T extends string | File> = (value?: T) => ValidationResult
-
-export interface FieldValidationProps<T extends string | File> {
-    label?: string
-    description?: string
-    disabled?: boolean
-    placeholder?: string
-    required?: boolean
-    validMarker?: boolean | undefined
-    validMessage?: string
-    invalidMarker?: boolean | undefined
-    invalidMessage?: string
-    activateValidation?: boolean
-    validate?: ValidateFunction<T> | undefined
-}
+export type ValidateFunction<T extends FieldValidationTypes> = (value?: T) => ValidationResult
 
-export interface FieldValidationOptions {
-    customValidate?: () => ValidationResult
-    requiredInvalidMessage?: string
+type FieldValidationEvents = 'change' | 'validate' | 'focusin' | 'focusout'
+interface FieldValidationEventsPayloads {
+    change: [value?: FieldValidationTypes]
+    validate: [result: ValidationResult]
+    focusin: [event: Event]
+    focusout: [event: Event]
 }
-
-export interface FieldValidationReturn<T extends string | File> {
-    value: Ref<T | undefined>
-    isValid: ComputedRef<boolean>
-    validMarker: ComputedRef<boolean>
-    invalidMarker: ComputedRef<boolean>
-    validMessage: Ref<string | undefined>
-    invalidMessage: ComputedRef<string | undefined>
+type FieldValidationEmits = <key extends FieldValidationEvents>(
+    eventName: key,
+    ...args: FieldValidationEventsPayloads[key]
+) => void
+
+export interface FieldValidationReturn {
+    /**
+     * Will return the result of the validation, or undefined in case has not yet been validated (or
+     * if activateValidation is false)
+     */
+    validation: Ref<ValidationResult | undefined>
     onFocus: (event: Event, inFocus: boolean) => void
-    required: Ref<boolean | undefined>
-    activateValidation: Ref<boolean | undefined>
 }
 
-export function propsValidator4ValidateFunc(value: unknown, _props: unknown): boolean {
-    if (value === undefined) {
-        return true
-    }
-    if (typeof value !== 'function') {
-        return false
-    }
-    const returnObject = value('') as Record<string, unknown>
-    if (typeof returnObject !== 'object') {
-        return false
-    }
-    if (!('valid' in returnObject)) {
-        return false
-    }
-    if (!('invalidMessage' in returnObject)) {
-        return false
-    }
-    if (typeof returnObject.valid !== 'boolean') {
-        return false
-    }
-    if (typeof returnObject.invalidMessage !== 'string') {
-        return false
-    }
-    return true
+interface FieldValidationConfig<T extends FieldValidationTypes> {
+    model?: MaybeRefOrGetter<T | undefined>
+
+    required?: MaybeRefOrGetter<boolean>
+    requiredInvalidMessage?: MaybeRefOrGetter<string>
+
+    /**
+     * If set to true, the validation will be triggered as soon as the field is first rendered. If
+     * set to false, the validation will only be triggered when the field is modified.
+     *
+     * By default, the field will not be validated until the user actually starts typing/editing it.
+     * This flag can force the validation from the get-go.
+     */
+    validateWhenPristine?: MaybeRefOrGetter<boolean>
+
+    /** NOTE: This prop is ignored when `activateValidation` is false. */
+    forceValid?: MaybeRefOrGetter<boolean>
+    validFieldMessage?: MaybeRefOrGetter<string>
+
+    /** NOTE: This prop is ignored when `activateValidation` is false. */
+    forceInvalid?: MaybeRefOrGetter<boolean>
+    invalidFieldMessage?: MaybeRefOrGetter<string>
+
+    validate?: ValidateFunction<T>
+    emits?: FieldValidationEmits
 }
 
-/**
- * Input field validation logic
- *
- * @param props Vue properties of the component to add the field validation
- * @param model Vue model definition of the input component (Ref or ModelRef from defineModel)
- * @param emits Vue event emitter definition of the input component
- * @param options Options object for custom validation and messages
- */
-export function useFieldValidation<T extends string | File>(
-    props: FieldValidationProps<T>,
-    model: Ref<T | undefined>,
-    emits: (event: string, ...args: unknown[]) => void,
-    {
-        customValidate = (): ValidationResult => {
-            return { valid: true, invalidMessage: '' }
-        },
+/** Input field validation logic */
+export function useFieldValidation<T extends FieldValidationTypes>(
+    config: FieldValidationConfig<T>
+): FieldValidationReturn {
+    const {
+        model,
+
+        required,
         requiredInvalidMessage = 'field_required',
-    }: FieldValidationOptions = {}
-): FieldValidationReturn<T> {
-    // Reactive data
-    const value = ref(model.value) as Ref<T | undefined>
 
+        validateWhenPristine = false,
+
+        forceValid,
+        validFieldMessage,
+
+        forceInvalid,
+        invalidFieldMessage,
+
+        validate,
+        emits,
+    } = config
+
+    const pristine = ref<boolean>(true)
     const userIsTyping = ref<boolean>(false)
-    const activateValidation = toRef(props, 'activateValidation')
-    const required = toRef(props, 'required')
-    const validMessage = toRef(props, 'validMessage')
-    const validation = ref<ValidationResult>({ valid: true, invalidMessage: '' })
+    const validation = ref<ValidationResult | undefined>()
+
+    const validMessage = computed<string>(() => {
+        if (toValue(validFieldMessage)) {
+            return toValue(validFieldMessage)!
+        }
+        return ''
+    })
+    const invalidMessage = computed<string>(() => {
+        const propValue = toValue(invalidFieldMessage)
+        if (propValue) {
+            return propValue
+        }
+        return 'invalid_field'
+    })
 
     // Helper function to check if value is empty
     const isEmpty = (value?: T): boolean => {
@@ -105,87 +117,71 @@ export function useFieldValidation<T extends string | File>(
         return false
     }
 
-    // Computed properties
-    const isValid = computed(() => {
-        return validation.value.valid
+    watchEffect(() => {
+        internalValidate()
     })
-    const invalidMarker = computed(() => {
-        if (!activateValidation.value) {
-            return false
-        }
-        let _invalidMarker = !isValid.value
-        if (props.invalidMarker !== undefined) {
-            _invalidMarker = _invalidMarker || !!props.invalidMarker
-        }
-        return _invalidMarker
-    })
-    const validMarker = computed(() => {
-        // Do not add a valid marker when the marker are not activated or when the field is empty
-        // or when it is already marked as invalid
-        if (!activateValidation.value || isEmpty(value.value) || !isValid.value) {
-            return false
-        }
-        // If validMarker prop is explicitly provided (not undefined), use it
-        if (props.validMarker !== undefined) {
-            return props.validMarker
-        }
-        // Default: show valid marker when field is valid
-        return true
-    })
-    const invalidMessage = computed(() => {
-        if (props.invalidMessage) {
-            return props.invalidMessage
+    watch(
+        () => toValue(model),
+        (newValue) => {
+            pristine.value = false
+            const unrefedEmits = unref(emits)
+            if (unrefedEmits) {
+                unrefedEmits('change', newValue)
+            }
         }
-        return validation.value.invalidMessage
-    })
+    )
 
-    // Watches
-    watch(activateValidation, () => validate())
-    watch(userIsTyping, () => validate())
-    watch(value, () => {
-        model.value = value.value
-        validate()
-        emits('change', value.value)
-    })
-    watch(model, (newValue) => (value.value = newValue))
+    function internalValidate(): void {
+        if (pristine.value && !toValue(validateWhenPristine)) {
+            validation.value = undefined
+            return
+        }
 
-    onMounted(() => {
-        validate()
-    })
+        const unrefedEmits = unref(emits)
 
-    function validate(): void {
-        validation.value = customValidate()
-        if (required.value && isEmpty(value.value)) {
+        if (toValue(forceValid) === true) {
+            validation.value = {
+                valid: true,
+                invalidMessage: validMessage.value,
+            }
+        } else if (toValue(forceInvalid) === true) {
             validation.value = {
                 valid: false,
-                invalidMessage: requiredInvalidMessage,
+                invalidMessage: invalidMessage.value,
+            }
+        } else if (toValue(required) === true && isEmpty(toValue(model))) {
+            validation.value = {
+                valid: false,
+                invalidMessage: toValue(requiredInvalidMessage) ?? invalidMessage.value,
+            }
+        } else if (validate) {
+            validation.value = validate(toValue(model))
+        } else {
+            validation.value = {
+                valid: true,
+                invalidMessage: validMessage.value,
             }
         }
-        if (props.validate && validation.value.valid) {
-            // Run user custom validation
-            validation.value = props.validate(value.value)
+        if (unrefedEmits) {
+            unrefedEmits('validate', validation.value)
         }
-        emits('validate', validation.value.valid)
     }
 
     function onFocus(event: Event, inFocus: boolean): void {
         userIsTyping.value = inFocus
+        const unrefedEmits = unref(emits)
+        if (!unrefedEmits) {
+            return
+        }
         if (inFocus) {
-            emits('focusin', event)
+            unrefedEmits('focusin', event)
         } else {
-            emits('focusout', event)
+            unrefedEmits('focusout', event)
         }
     }
 
     return {
-        value,
-        isValid,
-        validMarker,
-        invalidMarker,
-        validMessage,
-        invalidMessage,
+        validation,
         onFocus,
-        required,
-        activateValidation,
     }
 }
diff --git a/packages/viewer/src/utils/featureStyleUtils.ts b/packages/viewer/src/utils/featureStyleUtils.ts
index c2b10962c5..582b5450af 100644
--- a/packages/viewer/src/utils/featureStyleUtils.ts
+++ b/packages/viewer/src/utils/featureStyleUtils.ts
@@ -398,13 +398,10 @@ export function geoadminStyleFunction(
     let image: Icon | undefined
     if (editableFeature?.icon) {
         image = new Icon({
-            src: generateIconURL(
-                editableFeature.icon,
-                editableFeature.fillColor,
-                editableFeature.iconSize
-            ),
+            src: generateIconURL(editableFeature.icon, editableFeature.fillColor),
             crossOrigin: 'Anonymous',
             anchor: editableFeature.icon.anchor,
+            scale: editableFeature.iconSize?.iconScale,
         })
     }
     const styles = [
diff --git a/packages/viewer/src/utils/kmlUtils.ts b/packages/viewer/src/utils/kmlUtils.ts
index 7c470ec0ed..1ef1525d1d 100644
--- a/packages/viewer/src/utils/kmlUtils.ts
+++ b/packages/viewer/src/utils/kmlUtils.ts
@@ -554,7 +554,7 @@ export function getEditableFeatureFromKmlFeature(
         })
         const image = style.getImage()
         if (image instanceof IconStyle) {
-            image.setSrc(generateIconURL(icon, fillColor, iconSize))
+            image.setSrc(generateIconURL(icon, fillColor))
         }
     }
 
diff --git a/packages/viewer/tests/cypress/support/drawing.ts b/packages/viewer/tests/cypress/support/drawing.ts
index 8640e819df..e1a0e67c44 100644
--- a/packages/viewer/tests/cypress/support/drawing.ts
+++ b/packages/viewer/tests/cypress/support/drawing.ts
@@ -199,8 +199,8 @@ Cypress.Commands.add('goToDrawing', (queryParams = {}, withHash = true) => {
 
 Cypress.Commands.add('openDrawingMode', () => {
     cy.openMenuIfMobile()
-    cy.get('[data-cy="menu-tray-drawing-section"]').should('be.visible').click()
-    // Make sure that the map pointer events are unregistered to avoid intereference with drawing
+    cy.get('[data-cy="menu-tray-drawing-section"]:visible').click()
+    // Make sure that the map pointer events are unregistered to avoid interference with drawing
     // pointer events
     cy.window().its('mapPointerEventReady').should('be.false')
 })
@@ -215,9 +215,9 @@ Cypress.Commands.add('closeDrawingMode', (closeDrawingNotSharedAdmin = true) =>
                 cy.get('[data-cy="drawing-share-admin-close"]').click()
             }
         })
-        cy.getPinia().should((pinia) => {
+        cy.waitUntilState((pinia) => {
             const drawingStore = useDrawingStore(pinia)
-            expect(drawingStore.overlay.show).to.be.false
+            return !drawingStore.overlay.show
         })
         // In drawing mode the click event on the map are removed therefore we need to wait that
         // they are added again begore continuing testing
@@ -371,7 +371,7 @@ export async function checkKMLRequest(
     request: CyHttpMessages.IncomingHttpRequest,
     data: (RegExp | string)[],
     updatedKmlId?: string
-) {
+): Promise<void> {
     // Check request
     if (updatedKmlId) {
         const urlArray = request.url.split('/')
diff --git a/packages/viewer/tests/cypress/tests-component/Inputs.cy.ts b/packages/viewer/tests/cypress/tests-component/Inputs.cy.ts
index eb82a962b5..66d5bde371 100644
--- a/packages/viewer/tests/cypress/tests-component/Inputs.cy.ts
+++ b/packages/viewer/tests/cypress/tests-component/Inputs.cy.ts
@@ -1,5 +1,7 @@
 /// <reference types="cypress" />
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import EmailInput from '@/utils/components/EmailInput.vue'
 import FileInput from '@/utils/components/FileInput.vue'
 import TextAreaInput from '@/utils/components/TextAreaInput.vue'
@@ -48,13 +50,18 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
         )
     })
     it('It has invalid marker when required and empty', () => {
+        cy.log('without setting validateWhenPristine, no validation should occur')
         cy.mount(element, {
             props: { required: true },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}"]`).should('not.have.class', 'is-invalid')
+
+        cy.log(
+            'with validateWhenPristine: true, validation should occur even if the field is empty'
+        )
         cy.mount(element, {
-            props: { required: true, activateValidation: true },
+            props: { required: true, validateWhenPristine: true },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
@@ -62,17 +69,20 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
             'is-invalid'
         )
     })
-    it('It has invalid marker when invalidMarker is set', () => {
+    it('It has invalid marker when forceInvalid is set', () => {
+        cy.log('without setting validateWhenPristine, no validation should occur')
         cy.mount(element, {
-            props: { invalidMarker: true },
+            props: { forceInvalid: true },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
             'not.have.class',
             'is-invalid'
         )
+
+        cy.log('with validateWhenPristine: true, validation should occur')
         cy.mount(element, {
-            props: { invalidMarker: true, activateValidation: true },
+            props: { forceInvalid: true, validateWhenPristine: true },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
@@ -81,20 +91,26 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
         )
     })
     it('It has invalid message when invalidMessage is set', () => {
+        cy.log('without setting validateWhenPristine, no validation should occur')
         cy.mount(element, {
-            props: { invalidMarker: true, invalidMessage: 'Invalid message' },
+            props: {
+                forceInvalid: true,
+                invalidMessage: 'Invalid message',
+            },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
             'not.have.class',
             'is-invalid'
         )
-        cy.get(`[data-cy="${dataCy}-invalid-feedback"]`).should('not.be.visible')
+        cy.get(`[data-cy="${dataCy}-invalid-feedback"]`).should('not.exist')
+
+        cy.log('with validateWhenPristine: true, validation should occur')
         cy.mount(element, {
             props: {
-                invalidMarker: true,
+                forceInvalid: true,
                 invalidMessage: 'Invalid message',
-                activateValidation: true,
+                validateWhenPristine: true,
             },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
@@ -105,9 +121,10 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
         cy.get(`[data-cy="${dataCy}-invalid-feedback"]`).should('be.visible')
         cy.get(`[data-cy="${dataCy}-invalid-feedback"]`).contains('Invalid message')
     })
-    it('It has valid marker when validMarker is set', () => {
+    it('It has valid marker when forceValid is set', () => {
+        cy.log('without setting validateWhenPristine, no validation should occur')
         cy.mount(element, {
-            props: { validMarker: true },
+            props: { forceValid: true },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
@@ -115,15 +132,17 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
             'is-valid'
         )
         cy.get(`[data-cy="${dataCy}-valid-feedback"]`).should('not.exist')
+
+        cy.log('with validateWhenPristine: true, validation should occur')
         cy.mount(element, {
             props: {
-                validMarker: true,
-                activateValidation: true,
+                forceValid: true,
+                validateWhenPristine: true,
             },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
-            'not.have.class',
+            'have.class',
             'is-valid'
         )
         if (element === FileInput) {
@@ -142,8 +161,9 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
         )
     })
     it('It has valid message when validMessage is set on non empty field', () => {
+        cy.log('without setting validateWhenPristine, no validation should occur')
         cy.mount(element, {
-            props: { validMarker: true, validMessage: 'Valid message' },
+            props: { forceValid: true, validMessage: 'Valid message' },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
@@ -151,19 +171,21 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
             'is-valid'
         )
         cy.get(`[data-cy="${dataCy}-valid-feedback"]`).should('not.be.visible')
+
+        cy.log('with validateWhenPristine: true, validation should occur')
         cy.mount(element, {
             props: {
-                validMarker: true,
+                forceValid: true,
                 validMessage: 'Valid message',
-                activateValidation: true,
+                validateWhenPristine: true,
             },
         })
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
-            'not.have.class',
+            'have.class',
             'is-valid'
         )
-        cy.get(`[data-cy="${dataCy}-valid-feedback"]`).should('not.be.visible')
+        cy.get(`[data-cy="${dataCy}-valid-feedback"]`).should('be.visible')
         if (element === FileInput) {
             cy.get(`[data-cy="${dataCy}"]`).selectFile(
                 { contents: Cypress.Buffer.from('file contents'), fileName: 'file.txt' },
@@ -182,13 +204,23 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
         cy.get(`[data-cy="${dataCy}-valid-feedback"]`).contains('Valid message')
     })
     it('It validate the field with external validation method', () => {
-        cy.mount(element, {
-            props: {
-                validate: () => {
-                    return { valid: false, invalidMessage: 'Invalid field' }
+        if (element === FileInput) {
+            cy.mount(element, {
+                props: {
+                    validate: (_: File): ValidationResult => {
+                        return { valid: false, invalidMessage: 'Invalid field' }
+                    },
                 },
-            },
-        })
+            })
+        } else {
+            cy.mount(element, {
+                props: {
+                    validate: (_: string): ValidationResult => {
+                        return { valid: false, invalidMessage: 'Invalid field' }
+                    },
+                },
+            })
+        }
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
             'not.have.class',
@@ -198,15 +230,29 @@ const generateTest = (element: Record<string, unknown>, dataCy: string) => {
             'not.have.class',
             'is-invalid'
         )
-        cy.get(`[data-cy="${dataCy}-invalid-feedback"]`).should('not.be.visible')
-        cy.mount(element, {
-            props: {
-                validate: () => {
-                    return { valid: false, invalidMessage: 'Invalid field' }
+        cy.get(`[data-cy="${dataCy}-invalid-feedback"]`).should('not.exist')
+        if (element === FileInput) {
+            cy.mount(element, {
+                props: {
+                    validate: (_: File): ValidationResult => {
+                        return {
+                            valid: false,
+                            invalidMessage: 'Invalid field',
+                        }
+                    },
+                    validateWhenPristine: true,
                 },
-                activateValidation: true,
-            },
-        })
+            })
+        } else {
+            cy.mount(element, {
+                props: {
+                    validate: (_: string): ValidationResult => {
+                        return { valid: false, invalidMessage: 'Invalid field' }
+                    },
+                    validateWhenPristine: true,
+                },
+            })
+        }
         cy.get(`[data-cy="${dataCy}"]`).should('be.enabled')
         cy.get(`[data-cy="${dataCy}${element === FileInput ? '-text' : ''}"]`).should(
             'have.class',
@@ -227,9 +273,7 @@ describe('Test Validation Input fields', () => {
     context('EmailInput', () => {
         generateTest(EmailInput, 'email-input')
         it('It is marked invalid with invalid email', () => {
-            cy.mount(EmailInput, {
-                props: { activateValidation: true },
-            })
+            cy.mount(EmailInput)
             cy.get(`[data-cy="email-input"]`).should('be.enabled')
             cy.get(`[data-cy="email-input"]`).type('hello')
             cy.get(`[data-cy="email-input"]`).should('have.class', 'is-invalid')
@@ -241,7 +285,7 @@ describe('Test Validation Input fields', () => {
         generateTest(FileInput, 'file-input')
         it('It is marked invalid with invalid file types', () => {
             cy.mount(FileInput, {
-                props: { activateValidation: true, acceptedFileTypes: ['.json', '.kml'] },
+                props: { acceptedFileTypes: ['.json', '.kml'] },
             })
             cy.get(`[data-cy="file-input"]`).should('be.enabled')
             cy.get(`[data-cy="file-input"]`).selectFile(
@@ -258,7 +302,7 @@ describe('Test Validation Input fields', () => {
         })
         it('It is marked invalid with file too big', () => {
             cy.mount(FileInput, {
-                props: { activateValidation: true, maxFileSize: 10 },
+                props: { maxFileSize: 10 },
             })
             cy.get(`[data-cy="file-input"]`).should('be.enabled')
             cy.get(`[data-cy="file-input"]`).selectFile(
diff --git a/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts b/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts
index b87615a6be..39699ee9d7 100644
--- a/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts
+++ b/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts
@@ -80,12 +80,12 @@ describe('Drawing module tests', () => {
         function waitForKmlUpdate(...regexExpressions: string[]): void {
             cy.wait('@update-kml')
                 .its('request')
-                .should(
-                    (request) =>
-                        void checkKMLRequest(
-                            request as CyHttpMessages.IncomingHttpRequest,
-                            regexExpressions.map((expression) => new RegExp(expression))
-                        )
+                // we can't use .should here as checkKMLRequest is async (returns a Promise<void>)
+                .then((request) =>
+                    checkKMLRequest(
+                        request as CyHttpMessages.IncomingHttpRequest,
+                        regexExpressions.map((expression) => new RegExp(expression))
+                    )
                 )
         }
 
@@ -146,7 +146,7 @@ describe('Drawing module tests', () => {
             cy.get('[data-cy="ol-map"]:visible').click()
 
             cy.wait('@post-kml').then((interception) => {
-                const kmlId = `${getServiceKmlBaseUrl()}api/kml/files/${interception.response?.body.id}`
+                const kmlUrl = `${getServiceKmlBaseUrl()}api/kml/files/${interception.response?.body.id}`
                 const bgLayer = 'test.background.layer2'
 
                 cy.log(
@@ -306,7 +306,7 @@ describe('Drawing module tests', () => {
                 cy.log('Button should be disabled if url empty')
                 cy.get(
                     '[data-cy="drawing-style-media-url"] [data-cy="text-input-invalid-feedback"]'
-                ).should('not.be.visible')
+                ).should('not.exist')
 
                 cy.log('Button should be disabled if url invalid')
                 cy.get('[data-cy="drawing-style-media-url"] [data-cy="text-input"]').type(
@@ -371,7 +371,7 @@ describe('Drawing module tests', () => {
                 cy.get('[data-cy="drawing-style-media-url"] [data-cy="text-input"]').type(valid_url)
                 cy.get('[data-cy="drawing-style-media-generate-button"]').should('be.enabled')
 
-                cy.log('Generate video link')
+                cy.log('Generate video link (external URL)')
                 cy.get('[data-cy="drawing-style-media-generate-button"]').click()
                 cy.get('[data-cy="drawing-style-feature-description"]').should(
                     'have.value',
@@ -380,6 +380,7 @@ describe('Drawing module tests', () => {
                 waitForKmlUpdate(`iframe src="${valid_url}".*`)
                 cy.get('[data-cy="infobox-close"]').click()
 
+                cy.log('Adding a second marker with video link (external URL)')
                 cy.clickDrawingTool(EditableFeatureTypes.Marker)
                 cy.get('[data-cy="ol-map"]').click(160, 220)
                 cy.wait('@update-kml')
@@ -389,6 +390,9 @@ describe('Drawing module tests', () => {
                 waitForKmlUpdate(`(iframe src="${valid_url}".*){2}`)
                 cy.get('[data-cy="infobox-close"]').click()
 
+                cy.log(
+                    'Adding a third marker with image link (from geo.admin.ch, there should be no disclaimer)'
+                )
                 cy.clickDrawingTool(EditableFeatureTypes.Marker)
                 cy.get('[data-cy="ol-map"]').click(220, 260)
                 cy.wait('@update-kml')
@@ -400,10 +404,13 @@ describe('Drawing module tests', () => {
                 waitForKmlUpdate(`iframe src="${valid_whitelisted_url}"`)
                 cy.get('[data-cy="infobox-close"]').click()
 
+                cy.log(
+                    'Closing the drawing module, and checking that the drawing layer is added to the map'
+                )
                 cy.closeDrawingMode()
                 cy.closeMenuIfMobile()
                 waitForKmlUpdate(`(ExtendedData.*){14}`)
-                cy.checkOlLayer([bgLayer, kmlId])
+                cy.checkOlLayer([bgLayer, `KML|${kmlUrl}`])
 
                 cy.log('Hyperlink exists after sanitize')
                 cy.intercept('**http:dummy*', {
diff --git a/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts b/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts
index 2fe6b866c6..30f40d3005 100644
--- a/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts
+++ b/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts
@@ -309,7 +309,7 @@ describe('Testing the report problem form', () => {
             cy.get('[data-cy="ol-map"]').click(mapWidth / 2 + 50, mapHeight / 2)
         })
         // we need to increase the timeout here below because, upon opening the drawing mode for the
-        // first time in e2e tests, the loading of the library can take more time 
+        // first time in e2e tests, the loading of the library can take more time
         cy.get('[data-cy="drawing-header-title"]', { timeout: 15000 })
             .should('be.visible')
             .contains('3. Indicate the appropriate location on the map :')
@@ -324,18 +324,17 @@ describe('Testing the report problem form', () => {
         cy.get('[data-cy="report-problem-form"]').as('reportForm').should('exist')
 
         cy.log('Select category')
-        cy.get('[data-cy="report-problem-category"] [data-cy="dropdown-main-button"]')
-            .as('categoryDropdown')
+        cy.get('[data-cy="report-problem-category"] [data-cy="dropdown-main-button"]').as(
+            'categoryDropdown'
+        )
         cy.get('@categoryDropdown').click()
         cy.get('[data-cy="dropdown-item-other"]').click()
 
         cy.log('Write description and email')
-        cy.get('[data-cy="report-problem-text-area"] [data-cy="text-area-input"]')
-            .as('textArea')
+        cy.get('[data-cy="report-problem-text-area"] [data-cy="text-area-input"]').as('textArea')
         cy.get('@textArea').type(text)
 
-        cy.get('[data-cy="report-problem-email"] [data-cy="email-input"]')
-            .as('emailInput')
+        cy.get('[data-cy="report-problem-email"] [data-cy="email-input"]').as('emailInput')
         cy.get('@emailInput').type(validEmail)
 
         cy.get('@emailInput').should('have.value', validEmail)
@@ -397,19 +396,19 @@ describe('Testing the report problem form', () => {
         cy.get('[data-cy="submit-button"]').click()
         cy.wait('@feedback').then((interception) => {
             const formData = parseFormData(interception.request)
-                ;[
-                    { name: 'subject', contains: `[Problem Report]` },
-                    { name: 'feedback', contains: text },
-                    { name: 'version', contains: APP_VERSION.replace('.dirty', '') },
-                    { name: 'ua', contains: navigator.userAgent },
-                    { name: 'kml', contains: '<Data name="type"><value>marker</value></Data>' },
-                    { name: 'kml', contains: '<Data name="type"><value>annotation</value></Data>' },
-                    { name: 'kml', contains: '<Data name="type"><value>linepolygon</value></Data>' },
-                ].forEach((param) => {
-                    expect(interception.request.body).to.be.a('String')
-                    expect(formData).to.haveOwnProperty(param.name)
-                    expect(formData[param.name]).to.contain(param.contains)
-                })
+            ;[
+                { name: 'subject', contains: `[Problem Report]` },
+                { name: 'feedback', contains: text },
+                { name: 'version', contains: APP_VERSION.replace('.dirty', '') },
+                { name: 'ua', contains: navigator.userAgent },
+                { name: 'kml', contains: '<Data name="type"><value>marker</value></Data>' },
+                { name: 'kml', contains: '<Data name="type"><value>annotation</value></Data>' },
+                { name: 'kml', contains: '<Data name="type"><value>linepolygon</value></Data>' },
+            ].forEach((param) => {
+                expect(interception.request.body).to.be.a('String')
+                expect(formData).to.haveOwnProperty(param.name)
+                expect(formData[param.name]).to.contain(param.contains)
+            })
         })
     })
 })