mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
validation of input fields of GddSend
This commit is contained in:
Moriz Wahl
parent
bb7febc938
commit
4ee158bf32
@ -44,7 +44,10 @@
|
||||
"max_gdd_info":"maximale anzahl GDD zum versenden erreicht!",
|
||||
"send_check":"Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!",
|
||||
"thx":"Danke,",
|
||||
"send_success":"deine Transaktion wurde erfolgreich ausgeführt"
|
||||
"send_success":"deine Transaktion wurde erfolgreich ausgeführt",
|
||||
"validation": {
|
||||
"double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"error":"Fehler"
|
||||
|
||||
@ -44,7 +44,10 @@
|
||||
"max_gdd_info":"maximale anzahl GDD zum versenden erreicht!",
|
||||
"send_check":"Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!",
|
||||
"thx":"Thank you,",
|
||||
"send_success":"your transaction was successfully completed"
|
||||
"send_success":"your transaction was successfully completed",
|
||||
"validation": {
|
||||
"double": "The {field} field must be a decimal with two digits"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"error":"Error"
|
||||
|
||||
@ -2,6 +2,8 @@ import Vue from 'vue'
|
||||
import DashboardPlugin from './plugins/dashboard-plugin'
|
||||
import App from './App.vue'
|
||||
import i18n from './i18n.js'
|
||||
import { configure, extend } from 'vee-validate'
|
||||
import { required, email, min, between, double } from 'vee-validate/dist/rules'
|
||||
|
||||
// store
|
||||
import { store } from './store/store'
|
||||
@ -21,6 +23,38 @@ router.beforeEach((to, from, next) => {
|
||||
}
|
||||
})
|
||||
|
||||
configure({
|
||||
defaultMessage: (field, values) => {
|
||||
values._field_ = i18n.t(`fields.${field}`)
|
||||
return i18n.t(`validations.messages.${values._rule_}`, values)
|
||||
},
|
||||
})
|
||||
|
||||
extend('email', {
|
||||
...email,
|
||||
message: (_, values) => i18n.t('validations.messages.email', values),
|
||||
})
|
||||
|
||||
extend('required', {
|
||||
...required,
|
||||
message: (_, values) => i18n.t('validations.messages.required', values),
|
||||
})
|
||||
|
||||
extend('min', {
|
||||
...min,
|
||||
message: (_, values) => i18n.t('validations.messages.min', values),
|
||||
})
|
||||
|
||||
extend('double', {
|
||||
...double,
|
||||
message: (_, values) => i18n.t('form.validation.double', values),
|
||||
})
|
||||
|
||||
extend('between', {
|
||||
...between,
|
||||
message: (_, values) => i18n.t('validations.messages.between', values),
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { configure, extend } from 'vee-validate'
|
||||
import { required, email, min } from 'vee-validate/dist/rules'
|
||||
import i18n from './i18n'
|
||||
|
||||
configure({
|
||||
defaultMessage: (field, values) => {
|
||||
values._field_ = i18n.t(`fields.${field}`)
|
||||
return i18n.t(`validations.messages.${values._rule_}`, values)
|
||||
},
|
||||
})
|
||||
|
||||
extend('email', {
|
||||
...email,
|
||||
message: (_, values) => i18n.t('validations.messages.email', values),
|
||||
})
|
||||
|
||||
extend('required', {
|
||||
...required,
|
||||
message: (_, values) => i18n.t('validations.messages.required', values),
|
||||
})
|
||||
|
||||
extend('min', {
|
||||
...min,
|
||||
message: (_, values) => i18n.t('validations.messages.min', values),
|
||||
})
|
||||
@ -24,6 +24,10 @@ describe('GddSend', () => {
|
||||
$moment: jest.fn((m) => ({
|
||||
format: () => m,
|
||||
})),
|
||||
$i18n: {
|
||||
locale: jest.fn(() => 'en'),
|
||||
},
|
||||
$n: jest.fn((n) => String(n)),
|
||||
}
|
||||
|
||||
const Wrapper = () => {
|
||||
|
||||
@ -53,69 +53,84 @@
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<b-col class="text-left p-3 p-sm-1">{{ $t('form.receiver') }}</b-col>
|
||||
|
||||
<b-input-group
|
||||
id="input-group-1"
|
||||
label="Empfänger:"
|
||||
label-for="input-1"
|
||||
description="We'll never share your email with anyone else."
|
||||
size="lg"
|
||||
class="mb-3"
|
||||
>
|
||||
<b-input-group-prepend class="p-3 d-none d-md-block">
|
||||
<b-icon icon="envelope" class="display-3"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="input-1"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
placeholder="E-Mail"
|
||||
:rules="{ required: true, email: true }"
|
||||
required
|
||||
style="font-size: xx-large; padding-left: 20px"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
<validation-provider name="Email" rules="required|email" v-slot="{ errors }">
|
||||
<b-row>
|
||||
<b-col class="text-left p-3 p-sm-1">{{ $t('form.receiver') }}</b-col>
|
||||
<b-col v-if="errors" class="text-right p-3 p-sm-1">
|
||||
<span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-input-group
|
||||
id="input-group-1"
|
||||
label="Empfänger:"
|
||||
label-for="input-1"
|
||||
description="We'll never share your email with anyone else."
|
||||
size="lg"
|
||||
class="mb-3"
|
||||
>
|
||||
<b-input-group-prepend class="p-3 d-none d-md-block">
|
||||
<b-icon icon="envelope" class="display-3"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="input-1"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
placeholder="E-Mail"
|
||||
style="font-size: xx-large; padding-left: 20px"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
</validation-provider>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
|
||||
<b-col v-if="balance == form.amount" class="text-right">
|
||||
<b-badge variant="primary">{{ $t('form.max_gdd_info') }}</b-badge>
|
||||
</b-col>
|
||||
<b-input-group
|
||||
id="input-group-2"
|
||||
label="Betrag:"
|
||||
label-for="input-2"
|
||||
size="lg"
|
||||
class="mb-3"
|
||||
<validation-provider
|
||||
:name="$t('form.amount')"
|
||||
:rules="{
|
||||
required: true,
|
||||
double: [2, $i18n.locale === 'de' ? ',' : '.'],
|
||||
between: [0.01, balance],
|
||||
}"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<b-input-group-prepend class="p-2 d-none d-md-block">
|
||||
<div class="h3 pt-3 pr-3">GDD</div>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="input-2"
|
||||
v-model="form.amount"
|
||||
type="number"
|
||||
placeholder="0.01"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
:max="balance"
|
||||
style="font-size: xx-large; padding-left: 20px"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
<b-col class="text-left p-3 p-sm-1">{{ $t('form.memo') }}</b-col>
|
||||
<b-input-group id="input-group-3">
|
||||
<b-input-group-prepend class="p-3 d-none d-md-block">
|
||||
<b-icon icon="chat-right-text" class="display-3"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<b-form-textarea
|
||||
rows="3"
|
||||
v-model="form.memo"
|
||||
class="pl-3"
|
||||
style="font-size: x-large"
|
||||
></b-form-textarea>
|
||||
</b-input-group>
|
||||
<b-row>
|
||||
<b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
|
||||
<b-col v-if="errors" class="text-right p-3 p-sm-1">
|
||||
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-input-group
|
||||
id="input-group-2"
|
||||
label="Betrag:"
|
||||
label-for="input-2"
|
||||
size="lg"
|
||||
class="mb-3"
|
||||
>
|
||||
<b-input-group-prepend class="p-2 d-none d-md-block">
|
||||
<div class="h3 pt-3 pr-3">GDD</div>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
id="input-2"
|
||||
v-model="form.amount"
|
||||
type="number"
|
||||
:lang="$i18n.locale"
|
||||
:placeholder="$n(0.01)"
|
||||
step="0.01"
|
||||
style="font-size: xx-large; padding-left: 20px"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
<b-col class="text-left p-3 p-sm-1">{{ $t('form.memo') }}</b-col>
|
||||
<b-input-group id="input-group-3">
|
||||
<b-input-group-prepend class="p-3 d-none d-md-block">
|
||||
<b-icon icon="chat-right-text" class="display-3"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<b-form-textarea
|
||||
rows="3"
|
||||
v-model="form.memo"
|
||||
class="pl-3"
|
||||
style="font-size: x-large"
|
||||
></b-form-textarea>
|
||||
</b-input-group>
|
||||
</validation-provider>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
@ -294,4 +309,7 @@ video {
|
||||
max-height: 665px;
|
||||
max-width: 665px;
|
||||
}
|
||||
span.errors {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user