Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)

resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue

@@ -201,7 +201,7 @@ const rules = computed(() => ({
         },
         password_confirmation: {
             required: requiredIf(step.value === 2),
-            sameAs: sameAs(parameters.password)
+            sameAs: sameAs(parameters.password, 'password')
         }
     }
 }));

resources/assets/vue/components/general/elements/ValidationErrorComponent.vue

@@ -2,7 +2,7 @@
     <div v-if="validator?.$error" class="text-danger fs-10">
         <template v-for="(rule, name) in validator" :key="name">
             <small class="bold" v-if="typeof rule === 'object' && rule.$invalid">
-                <span class="btn-block">{{ getErrorMessage(name) }}</span>
+                <span class="btn-block">{{ getErrorMessage({ ...rule, $validator: name as unknown as string }) }}</span>
             </small>
         </template>
     </div>
@@ -15,6 +15,12 @@ interface Props {
 
 const props = defineProps<Props>();
 
+interface ValidationErrorItem {
+    $validator: string;
+    $invalid: boolean;
+    $params?: Record<string, any>;
+}
+
 const errorMessages: Record<string, string> = {
     required: 'this field is required',
     email: 'enter a valid email address',
@@ -28,7 +34,23 @@ const errorMessages: Record<string, string> = {
     numeric: 'this field must be numeric'
 };
 
-const getErrorMessage = (name: string | number) => {
-    return errorMessages[name as string] || 'invalid field';
+const getErrorMessage = (error: ValidationErrorItem): string => {
+    if (!error) return 'invalid value';
+
+    const validatorName = error.$validator;
+    const params = error.$params || {};
+
+    if (validatorName === 'minLength') return `${errorMessages.minLength} ${params.min} characters`;
+    if (validatorName === 'maxLength') return `${errorMessages.maxLength} ${params.max} characters`;
+    if (validatorName === 'sameAs' || validatorName === 'sameAsPassword') {
+        let fieldName = params.otherName || params.eq || 'password';
+        if (fieldName === 'password') fieldName = 'password';
+        return `${errorMessages.sameAs} ${fieldName} field`;
+    }
+    if (validatorName === 'minValue') return `${errorMessages.minValue} ${params.min}`;
+    if (validatorName === 'maxValue') return `${errorMessages.maxValue} ${params.max}`;
+
+    return errorMessages[validatorName] || 'invalid value';
 };
 </script>
+

resources/assets/vue/components/user/form/SystemFormComponent.vue

@@ -111,7 +111,7 @@ const rules = computed(() => ({
         password: { required, minLength: minLength(6) },
         password_confirmation: {
             required,
-            sameAsPassword: sameAs(() => parameters.value.password)
+            sameAsPassword: sameAs(() => parameters.value.password, 'password')
         },
         is_internal: {}
     }

resources/assets/vue/components/user/form/UserFormComponent.vue

@@ -105,7 +105,7 @@ const rules = computed(() => ({
         password: { required, minLength: minLength(6) },
         password_confirmation: {
             required,
-            sameAsPassword: sameAs(passwordRef)
+            sameAsPassword: sameAs(passwordRef, 'password')
         }
     }
 }));