added required field translations

src/i18n/ru.js

@@ -113,7 +113,6 @@ export const locale = {
   TICKETS: "Tickets",
   NEW_TICKET: "New Ticket",
   CONTACTS: "Contracts",
-  SHORT_NAME: "Short Name",
   
   REQUIRED_VALIDATION: "This field is required",
   MIN_LENGTH_VALIDATION: "This field should be at least {min} characters long",

src/views/login/Main.vue

@@ -101,12 +101,14 @@
 import { onMounted, reactive, toRefs, ref } from "vue";
 import dom from "@left4code/tw-starter/dist/js/dom";
 import { useVuelidate } from "@vuelidate/core";
-import { required, minLength, email } from "@vuelidate/validators";
+import { required, helpers, minLength, email } from "@vuelidate/validators";
 import { useAuthStore } from "@/stores";
 import router from "@/router";
 import Logo from "@/components/logo/Main.vue";
 import Lang from "@/components/lang/Main.vue";
 
+const { t } = useI18n({});
+
 const formData = reactive({
   email: "",
   password: "",
@@ -117,13 +119,15 @@ const isForgotPwdLoading = ref(false);
 
 const rules = {
   email: {
-    required,
-    email,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    email: helpers.withMessage(t("EMAIL_VALIDATION"), email),
   },
 
   password: {
-    required,
-    minLength: minLength(8),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
+    )
   },
 };
 

src/views/profile-forms/BankAccount.vue

@@ -156,7 +156,7 @@
 
 <script setup>
 import { reactive, watch, ref, toRefs, onMounted } from "vue";
-import { required, alpha, integer } from "@vuelidate/validators";
+import { required, helpers } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { fetchWrapper } from "@/api";
 import { useRoute } from "vue-router";
@@ -169,6 +169,8 @@ const route = useRoute();
 
 const maxDate = new Date();
 
+const { t } = useI18n({});
+
 const isLoading = ref(false);
 
 const date = ref("");
@@ -184,27 +186,27 @@ const formData = reactive({
 
 const rules = {
   account_number: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   account_date: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   currency: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   iban: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   bank_name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   country: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 };
 
@@ -215,7 +217,7 @@ watch(date, (currentValue, oldValue) => {
 });
 
 const onRegister = async () => {
- //console.log("formData.account_date: ", formData.account_date);
+  //console.log("formData.account_date: ", formData.account_date);
 
   validate.value.$touch();
 
@@ -229,7 +231,7 @@ const onRegister = async () => {
       formData
     );
     isLoading.value = false;
-   //console.log("response onRegister: ", response);
+    //console.log("response onRegister: ", response);
 
     // refresh LS "bankAccount"
     localStorage.removeItem("bankAccount");
@@ -246,7 +248,7 @@ onMounted(() => {
     ? JSON.parse(localStorage.getItem("bankAccount"))
     : route.params;
 
- //console.log("Params: ", params);
+  //console.log("Params: ", params);
 
   if (params) {
     localStorage.setItem("bankAccount", JSON.stringify(params));

src/views/profile-forms/Business.vue

@@ -176,7 +176,7 @@
 
 <script setup>
 import { reactive, watch, ref, toRefs, onMounted } from "vue";
-import { required, alpha, integer } from "@vuelidate/validators";
+import { required, helpers } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { fetchWrapper } from "@/api";
 import { useRoute } from "vue-router";
@@ -189,6 +189,8 @@ const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
 const route = useRoute();
 
+const { t } = useI18n({});
+
 const maxDate = new Date();
 
 const isLoading = ref(false);
@@ -214,31 +216,31 @@ const formData = reactive({
 
 const rules = {
   surname: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   patronomic_name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   date_of_birth: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   birth_place: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   citizenship_id: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_address: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 };
 

src/views/profile-forms/Company.vue

@@ -138,8 +138,7 @@
               </label>
               <input id="validation-form-4" v-model.trim="validate.registration_place.$model" type="text"
                 name="registration_place" class="form-control"
-                :class="{ 'border-danger': validate.registration_place.$error }"
-                :placeholder="$t('REG_PLACE')" />
+                :class="{ 'border-danger': validate.registration_place.$error }" :placeholder="$t('REG_PLACE')" />
               <template v-if="validate.registration_place.$error">
                 <div v-for="(error, index) in validate.registration_place.$errors" :key="index"
                   class="text-danger mt-2">
@@ -185,7 +184,7 @@
 
 <script setup>
 import { reactive, watch, ref, toRefs, onMounted } from "vue";
-import { required, alpha, integer } from "@vuelidate/validators";
+import { required, helpers } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
 import { fetchWrapper } from "@/api";
 import { useRoute } from "vue-router";
@@ -197,6 +196,8 @@ const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
 const route = useRoute();
 
+const { t } = useI18n({});
+
 const maxDate = new Date();
 
 const isLoading = ref(false);
@@ -215,11 +216,11 @@ const formData = reactive({
 
 const rules = {
   name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   short_name: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_number: {
@@ -227,19 +228,19 @@ const rules = {
   },
 
   registration_date: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   state_registration_agency: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_place: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 
   registration_address: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
   },
 };
 
@@ -255,7 +256,7 @@ const onRegister = async () => {
 
   if (validate.value.$invalid) return;
 
- //console.log("onRegister: ", formData);
+  //console.log("onRegister: ", formData);
 
   try {
     isLoading.value = true;
@@ -266,7 +267,7 @@ const onRegister = async () => {
     );
 
     isLoading.value = false;
-   //console.log("response onRegister: ", response);
+    //console.log("response onRegister: ", response);
 
     // refresh LS "profile"
     localStorage.removeItem("profile");

src/views/profile-forms/Contacts.vue

@@ -41,8 +41,7 @@
                   </span>
                 </label>
                 <input id="validation-form-2" v-model.trim="validate.email.$model" type="email" name="email"
-                  class="form-control" :class="{ 'border-danger': validate.email.$error }"
-                  :placeholder="$t('EMAIL')" />
+                  class="form-control" :class="{ 'border-danger': validate.email.$error }" :placeholder="$t('EMAIL')" />
                 <template v-if="validate.email.$error">
                   <div v-for="(error, index) in validate.email.$errors" :key="index" class="text-danger mt-2">
                     {{ error.$message }}
@@ -107,7 +106,7 @@ import { ref, reactive, toRefs, onMounted } from "vue";
 import {
   required,
   minLength,
-  maxLength,
+  helpers,
   email,
   integer,
 } from "@vuelidate/validators";
@@ -121,6 +120,8 @@ const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
 const route = useRoute();
 
+const { t } = useI18n({});
+
 const isLoading = ref(false);
 
 const formData = reactive({
@@ -132,22 +133,22 @@ const formData = reactive({
 
 const rules = {
   email: {
-    required,
-    email,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    email: helpers.withMessage(t("EMAIL_VALIDATION"), email),
   },
 
   phone: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     integer,
   },
 
   fax: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     integer,
   },
 
   address: {
-    required,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
     minLength: minLength(10),
   },
 };
@@ -170,7 +171,7 @@ const onRegister = async () => {
     );
 
     isLoading.value = false;
-   //console.log("response onRegister: ", response);
+    //console.log("response onRegister: ", response);
 
     // refresh LS "contacts"
     localStorage.removeItem("contacts");
@@ -187,7 +188,7 @@ onMounted(() => {
     ? JSON.parse(localStorage.getItem("contacts"))
     : route.params;
 
- //console.log("Params: ", params);
+  //console.log("Params: ", params);
 
   if (params) {
     localStorage.setItem("contacts", JSON.stringify(params));

src/views/update-password/Main.vue

@@ -12,8 +12,7 @@
           </a>
 
           <div class="my-auto">
-            <img alt="" class="-intro-x w-1/2 -mt-16"
-              src="@/assets/images/illustration.svg" />
+            <img alt="" class="-intro-x w-1/2 -mt-16" src="@/assets/images/illustration.svg" />
             <div class="-intro-x text-white font-medium text-4xl leading-tight mt-10">
               {{$t('SIGN_IN_MOTIVATION')}} <br />
               {{$t('SING_IN_MOTIVATION_RIGHT')}}
@@ -105,7 +104,7 @@
 import { onMounted, reactive, toRefs, ref, watch } from "vue";
 import dom from "@left4code/tw-starter/dist/js/dom";
 import { useVuelidate } from "@vuelidate/core";
-import { required, minLength, email } from "@vuelidate/validators";
+import { required, minLength, email, helpers } from "@vuelidate/validators";
 import { useAlertStore } from "@/stores";
 import router from "@/router";
 import Logo from "@/components/logo/Main.vue";
@@ -124,21 +123,27 @@ const isLoading = ref(false);
 
 const rules = {
   email: {
-    required,
-    email,
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    email: helpers.withMessage(t("EMAIL_VALIDATION"), email),
   },
 
   password: {
-    required,
-    minLength: minLength(8),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
+    )
   },
   confirm_password: {
-    required,
-    minLength: minLength(8),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
+    )
   },
   token: {
-    required,
-    minLength: minLength(4),
+    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    minLength: helpers.withMessage(
+      t("MIN_LENGTH_VALIDATION", { min: 4 }), minLength(4)
+    )
   },
 };
 
@@ -149,7 +154,7 @@ const onLogin = () => router.push({ path: "/" });
 const onUpdate = async () => {
   validate.value.$touch();
 
- //console.log("formData: ", formData);
+  //console.log("formData: ", formData);
   // check form validation
   if (validate.value.$invalid) return;
 
@@ -162,7 +167,7 @@ const onUpdate = async () => {
       formData,
     });
 
-   //console.log("update password", response);
+    //console.log("update password", response);
 
     isLoading.value = false;