pagesassos/panel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

fix: better validation on Contact form

Browse source
This commit is contained in:
Matthieu Bessat 2020-08-04 23:49:25 +02:00
parent fdd4589e1e
commit 30a271249c
1 changed files with 43 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/views/Delegate/Contact.vue
View file

@ -7,42 +7,51 @@
>
Ici vous pouvez préciser quelques manières de contacter votre association, aucun des champs indiqués n'est obligatoire.
</v-alert>
<v-alert
v-if="!formValid"
dense
type="error"
>
Attention ! Certains des champs renseignés sont invalides !
</v-alert>
</div>
<!-- <v-text-field
prepend-icon="call"
label="Numéro de téléphone"
outlined
v-model="$store.state.data.contacts.phone" /> -->
<v-text-field
prepend-icon="public"
label="Site web"
outlined
:rules="rules.website"
v-model="$store.state.data.contacts.website" />
<v-textarea
prepend-icon="room"
label="Adresse"
outlined
v-model="$store.state.data.contacts.address"
:rules="rules.address" />
<v-text-field
prepend-icon="$vuetify.icons.facebook"
label="Compte facebook"
outlined
v-model="$store.state.data.contacts.facebook"
:rules="rules.facebook" />
<v-text-field
prepend-icon="$vuetify.icons.twitter"
label="Compte twitter"
outlined
v-model="$store.state.data.contacts.twitter"
:rules="rules.twitter" />
<v-text-field
prepend-icon="$vuetify.icons.instagram"
label="Compte instagram"
outlined
v-model="$store.state.data.contacts.instagram"
:rules="rules.instagram" />
<v-form v-model="formValid" ref="form">
<v-text-field
prepend-icon="public"
label="Site web"
outlined
:rules="rules.website"
v-model="$store.state.data.contacts.website" />
<v-textarea
prepend-icon="room"
label="Adresse"
outlined
v-model="$store.state.data.contacts.address"
:rules="rules.address" />
<v-text-field
prepend-icon="$vuetify.icons.facebook"
label="Compte facebook"
outlined
v-model="$store.state.data.contacts.facebook"
:rules="rules.facebook" />
<v-text-field
prepend-icon="$vuetify.icons.twitter"
label="Compte twitter"
outlined
v-model="$store.state.data.contacts.twitter"
:rules="rules.twitter" />
<v-text-field
prepend-icon="$vuetify.icons.instagram"
label="Compte instagram"
outlined
v-model="$store.state.data.contacts.instagram"
:rules="rules.instagram" />
</v-form>
<AdditionalContacts />
<!-- <v-card
v-for="(contact, index) in $store.state.data.contacts.peoples"
@ -92,7 +101,11 @@ export default {
components: {
AdditionalContacts
},
mounted () {
this.$refs.form.validate()
},
data: () => ({
formValid: false,
rules: {
website: [
v => v === '' || /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/gm.test(v) || "L'adresse web doit être valide"