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