From 9086364db7a51d45c9db22ba9e3cd4e5a02a8eba Mon Sep 17 00:00:00 2001
From: Matthias Guillitte <matthias@guillitte.com>
Date: Wed, 16 Sep 2026 19:27:27 +0200
Subject: [PATCH] Form error message

---
 resources/js/components/PerceptronSetup.vue   | 13 ++++++++++---
 resources/js/components/ui/form/FormError.vue | 10 ++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/ui/form/FormError.vue

diff --git a/resources/js/components/PerceptronSetup.vue b/resources/js/components/PerceptronSetup.vue
index 9599b04..4a28ce4 100644
--- a/resources/js/components/PerceptronSetup.vue
+++ b/resources/js/components/PerceptronSetup.vue
@@ -24,6 +24,7 @@ import CardContent from './ui/card/CardContent.vue';
 import CardHeader from './ui/card/CardHeader.vue';
 import CardTitle from './ui/card/CardTitle.vue';
 import Input from './ui/input/Input.vue';
+import FormError from './ui/form/FormError.vue';
 
 const props = defineProps<{
     type: PerceptronType;
@@ -52,7 +53,7 @@ const maxIterationsInput = ref<{
 } | null>(null);
 const form = useForm({
     type: props.type,
-    dataset: '',
+    dataset: selectedDatasetCopy.value,
     weight_init_method: selectedMethod.value,
     hidden_layers: hiddenLayers.value,
     hidden_layers_neurons: hiddenLayersNeurons.value,
@@ -95,6 +96,8 @@ watch(maxIterations, (value) => {
 });
 
 watch(selectedDatasetCopy, (newvalue) => {
+    form.clearErrors('dataset');
+
     const selectedDatasetCopy = props.datasets.find(
         (dataset) => dataset.label === newvalue
     ) || null;
@@ -129,7 +132,11 @@ const trainingId  = ref<string>('');
 
 function startTraining() {
     if (!selectedDatasetCopy.value) {
-        alert('Veuillez sélectionner un dataset avant de lancer l\'entraînement.');
+        form.setError(
+            'dataset',
+            'Un dataset est nécessaire avant de lancer l\'entraînement.',
+        );
+        console.log(form.errors);
         return;
     }
 
@@ -199,7 +206,7 @@ watch(selectedDatasetCopy, (newValue) => {
                                 </NativeSelectOption>
                             </NativeSelect>
                         </FormControl>
-                        <div v-if="props.errors?.selectedDatasetCopy">{{ props.errors?.selectedDatasetCopy }}</div>
+                        <FormError :error="form.errors.dataset || props.errors?.selectedDatasetCopy" />
                     </FormItem>
                 </FormField>
 
diff --git a/resources/js/components/ui/form/FormError.vue b/resources/js/components/ui/form/FormError.vue
new file mode 100644
index 0000000..f2a69e6
--- /dev/null
+++ b/resources/js/components/ui/form/FormError.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+
+const props = defineProps<{
+  error?: string
+}>()
+</script>
+
+<template>
+    <div class="text-sm text-red-500">{{ props.error }}</div>
+</template>