fix(task): fixed form validation on task form

Author: KarinePistili

src/ux/UserTest/components/FormTask.vue

@@ -40,8 +40,9 @@
 
     <!-- Content Area with v-if for forced re-rendering -->
     <div class="stepper-content">
-      <v-card-text v-if="step === '1'">
+      <v-card-text v-show="step === '1'">
         <TaskBasicInfo
+          ref="taskBasicInfoRef"
           :model-value="localTask"
           :validation-rules="requiredRule"
           @update:model-value="handleTaskUpdate"
@@ -93,6 +94,8 @@ const props = defineProps({
   },
 });
 
+const taskBasicInfoRef = ref(null);
+
 const emit = defineEmits(['validate', 'update:task', 'complete']);
 
 const step = ref("1");
@@ -131,8 +134,18 @@ const goToPreviousStep = () => {
 };
 
 const valida = () => {
-  emit('validate', localTask.value);
-  return true;
+  const descOk = taskBasicInfoRef.value?.checkDescriptionValidation();
+  const nameOk = taskBasicInfoRef.value?.checkTaskNameValidation();
+
+  // trigger visual validator for task name
+  taskBasicInfoRef.value?.isValid?.value;
+  
+  if (nameOk && descOk) {
+    emit('validate', localTask.value);
+    return true;
+  }
+
+  return false;
 };
 
 const resetVal = () => {

src/ux/UserTest/components/task-steps/TaskBasicInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="task-basic-info">
+    <v-form ref="basicInfoForm">
     <div class="step-header mb-6">
       <h3 class="text-h6 font-weight-bold mb-2">Step 1: Task Basic Information</h3>
       <p class="text-body-2 text-grey-darken-1 mb-0">
@@ -35,14 +36,18 @@
           <v-icon size="14" class="mr-1">mdi-information-outline</v-icon>
           Provide detailed instructions for participants. Include the goal, context, and any specific steps they should follow.
         </p>
-        <div class="description-editor">
+        <div class="description-editor" :class="{ 'editor-error': showDescriptionError && !localTask.taskDescription?.trim() }">
           <quill-editor
             v-model:value="localTask.taskDescription"
             :options="editorOptions"
             class="custom-editor"
-            @change="validateStep"
+            @change="onChangeEditor"
+            @blur="checkDescriptionValidation"
           />
         </div>
+          <span v-if="showDescriptionError && !localTask.taskDescription?.trim()" class="error-text ml-4">
+            {{ t('Field Required') }}
+          </span>
       </v-col>
 
       <v-col cols="12">
@@ -63,8 +68,7 @@
         />
       </v-col>
     </v-row>
-
-   
+   </v-form>
   </div>
 </template>
 
@@ -87,6 +91,8 @@ const emit = defineEmits(['update:modelValue', 'validate']);
 const { t } = useI18n();
 
 const localTask = ref({ ...props.modelValue });
+const basicInfoForm = ref(null);
+const showDescriptionError = ref(false);
 
 const editorOptions = {
   theme: 'snow',
@@ -113,13 +119,36 @@ const completionPercentage = computed(() => {
 });
 
 const isValid = computed(() => {
-  return !!(localTask.value.taskName?.trim() && localTask.value.taskDescription?.trim());
+  basicInfoForm.value?.validate?.();
+
+  const nameOk = !!localTask.value.taskName?.trim();
+  const descOk = !!localTask.value.taskDescription?.trim();
+  return nameOk && descOk;
 });
 
+const onChangeEditor = (content) => {
+  localTask.value.taskDescription = content.html
+  validateStep();
+};
+
+const checkTaskNameValidation = () => {
+  const nameOk = !!localTask.value.taskName?.trim();
+  return nameOk;
+};
+
+const checkDescriptionValidation = () => {
+  const descOk = !!localTask.value.taskDescription?.trim();
+  if(!descOk) showDescriptionError.value = true;
+  else showDescriptionError.value = false;
+  return descOk;
+};
+
 const validateStep = () => {
   emit('validate', isValid.value);
 };
 
+defineExpose({ isValid, checkDescriptionValidation, checkTaskNameValidation });
+
 // Watch for local changes and emit
 watch(
   localTask,
@@ -132,6 +161,18 @@ watch(
 </script>
 
 <style scoped>
+.editor-error {
+  border: 1px solid red !important;
+}
+
+.error-text {
+  color: red;
+  font-size: 12px;
+  margin-top: 4px;
+  display: block;
+  font-weight: 300;
+}
+
 .task-basic-info {
   max-width: 100%;
 }
@@ -146,7 +187,7 @@ watch(
 
 .description-editor {
   border: 1px solid rgba(var(--v-theme-outline), 0.3);
-  border-radius: 8px;
+  border-radius: 0px;
   overflow: hidden;
   transition: border-color 0.2s ease;
 }
@@ -159,6 +200,7 @@ watch(
   min-height: 120px;
   font-size: 14px;
   line-height: 1.5;
+  padding: 8px;
 }
 
 :deep(.custom-editor .ql-toolbar) {

src/ux/UserTest/components/task-steps/TaskConfiguration.vue

@@ -15,7 +15,8 @@
         md="4"
       >
         <p class="text-subtitle-2 font-weight-medium mb-2">
-          Task Link (URL) <span class="text-error">*</span>
+          Task Link (URL) 
+          <!-- <span class="text-error">*</span> -->
         </p>
         <p class="text-caption text-grey-darken-1 mb-3">
           <v-icon
@@ -42,7 +43,8 @@
         md="4"
       >
         <p class="text-subtitle-2 font-weight-medium mb-2">
-          Estimated Time (minutes) <span class="text-error">*</span>
+          Estimated Time (minutes) 
+          <!-- <span class="text-error">*</span> -->
         </p>
         <p class="text-caption text-grey-darken-1 mb-3">
           <v-icon
@@ -70,7 +72,8 @@
         md="4"
       >
         <p class="text-subtitle-2 font-weight-medium mb-2">
-          {{ $t('titles.answerType') }} <span class="text-error">*</span>
+          {{ $t('titles.answerType') }} 
+          <!-- <span class="text-error">*</span> -->
         </p>
         <p class="text-caption text-grey-darken-1 mb-3">
           <v-icon
@@ -115,7 +118,8 @@
         cols="12"
       >
         <p class="text-subtitle-2 font-weight-medium mb-2">
-          {{ $t('switches.postTest') }} <span class="text-error">*</span>
+          {{ $t('switches.postTest') }} 
+          <!-- <span class="text-error">*</span> -->
         </p>
         <p class="text-caption text-grey-darken-1 mb-3">
           <v-icon
@@ -141,7 +145,8 @@
         cols="12"
       >
         <p class="text-subtitle-2 font-weight-medium mb-2">
-          {{ $t('switches.postForm') }} <span class="text-error">*</span>
+          {{ $t('switches.postForm') }} 
+          <!-- <span class="text-error">*</span> -->
         </p>
         <p class="text-caption text-grey-darken-1 mb-3">
           <v-icon