J'essaie d'ajouter un formulaire de contact avec une validation simple sur un site Web construit avec Vue.js en utilisant un exemple Vuetify.js. Je suis un débutant, donc je ne sais pas comment il devrait être implémenté dans un composant Vue.
Je souhaite obtenir une validation de formulaire côté client simple et la faire fonctionner avec un formulaire https://getform.org/ .
MIS À JOUR:
(extrait du formulaire Vuetify.js exemple )
<v-form v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
name="Name"
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
required
name="Email"
></v-text-field>
<v-btn
@click="submit"
:disabled="!valid"
>submit</v-btn>
</v-form>
<form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>
<script>
export default {
name: 'contact',
data () {
return {
snackbar: true,
valid: false,
name: '',
nameRules: [
(v) => !!v || 'Name is required',
(v) => v.length <= 10 || 'Name must be less than 10 characters'
],
email: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
]
}
},
methods: {
submit() {
nativeForm.submit()
}
}
}
</script>
<v-form method="post" action="https://www.getform.org/f/[YOUR-FORM-ID]" id="nativeForm" v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
name="message"
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
required
name="mail"
></v-text-field>
<v-btn @click="submit" :disabled="!valid">submit</v-btn>
</v-form>
<script>
export default {
name: 'contact',
data () {
return {
valid: false,
name: '',
nameRules: [
(v) => !!v || 'Name is required',
(v) => v.length <= 10 || 'Name must be less than 10 characters'
],
email: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
]
}
},
methods: {
submit() {
nativeForm.submit()
}
}
}
</script>
Pour ajouter des attributs name
. Getform en a besoin.
const app = new Vue({
el:'#app',
data:{
errors:[],
name:null,
age:null,
movie:null
},
methods:{
checkForm:function(e) {
if(this.name && this.age) return true;
this.errors = [];
if(!this.name) this.errors.Push("Name required.");
if(!this.age) this.errors.Push("Age required.");
e.preventDefault();
}
}
})
input,select {
margin-left: 10px;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<form id="app" @submit="checkForm" action="/something" method="post">
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<p>
<label for="name">Name<label>
<input type="text" name="name" id="name" v-model="name">
</p>
<p>
<label for="age">Age<label>
<input type="number" name="age" id="age" v-model="age" min="0">
</p>
<p>
<label for="movie">Favorite Movie<label>
<select name="movie" id="movie" v-model="movie">
<option>Star Wars</option>
<option>Vanilla Sky</option>
<option>Atomic Blonde</option>
</select>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
Ajoutez du CSS et c'est fait.