added required field translations

This commit is contained in:
Komek Hayytnazarov 2022-10-03 11:59:13 +05:00
parent c7f7cfd534
commit 9ca62dc3ad
6 changed files with 51 additions and 42 deletions

View File

@ -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",

View File

@ -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,
required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
email,
},
password: {
required,
minLength: minLength(8),
minLength: helpers.withMessage(
t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
)
},
};

View File

@ -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));

View File

@ -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),
},
};

View File

@ -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");

View File

@ -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,
required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
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));