diff --git a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue b/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue index 9a9d492c..48e4df78 100644 --- a/resources/assets/vue/components/accounts/forms/RegistrationFormComponent.vue +++ b/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') } } })); diff --git a/resources/assets/vue/components/general/elements/ValidationErrorComponent.vue b/resources/assets/vue/components/general/elements/ValidationErrorComponent.vue index 7a6da563..6e2cef03 100644 --- a/resources/assets/vue/components/general/elements/ValidationErrorComponent.vue +++ b/resources/assets/vue/components/general/elements/ValidationErrorComponent.vue @@ -2,7 +2,7 @@
@@ -15,6 +15,12 @@ interface Props { const props = defineProps(); +interface ValidationErrorItem { + $validator: string; + $invalid: boolean; + $params?: Record; +} + const errorMessages: Record = { required: 'this field is required', email: 'enter a valid email address', @@ -28,7 +34,23 @@ const errorMessages: Record = { 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'; }; + diff --git a/resources/assets/vue/components/user/form/SystemFormComponent.vue b/resources/assets/vue/components/user/form/SystemFormComponent.vue index 476e6ff1..b5a348a2 100644 --- a/resources/assets/vue/components/user/form/SystemFormComponent.vue +++ b/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: {} } diff --git a/resources/assets/vue/components/user/form/UserFormComponent.vue b/resources/assets/vue/components/user/form/UserFormComponent.vue index 1cce9b53..cb7a6685 100644 --- a/resources/assets/vue/components/user/form/UserFormComponent.vue +++ b/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') } } }));