Exercices Validation de formulaire
Exercice - Validation de formulaire#
En JavaScript, il est possible de vérifier et valider les champs de formulaire avant d'envoyer les informations au serveur. Cela permet de s'assurer que les données sont correctement formatées (ex: email bien formé, n° de téléphone à 10 chiffres, date ...).
Note: Nous n'aborderons pas ici le traitement des données du formulaire qui s'effectue sur le serveur. Une deuxième vérification des données est alors nécessaire pour valider les formulaires qui n'auraient pas été vérifié par JavaScript (JavaScript désactivé sur le navigateur, tentative de hack, etc.).
Prenons comme exemple ce formulaire HTML :
Formulaire HTML
<form action="#" method="get">
<fieldset>
<legend>Inscription</legend>
<p><label>Nom<input type="text" name="nom"></label></p>
<p><label>Prénom<input type="text" name="prenom"></label></p>
<p><label>Tel<input type="text" maxlength="10" name="telephone"></label></p>
<p><label>Email<input type="text" name="mail"></label></p>
<p><button>Envoyer</button></p>
</fieldset>
</form>
Le résultat est le suivant :
- premièrement, créez votre application Vue
- créez 4 propriétés pour les 4 champs, et binder avec
v-model
Vue.createApp({
data() {
return {
nom: '',
prenom: '',
tel: '',
mail: ''
};
}
}).mount('...');
<input type="text" name="nom" v-model="nom">
<input type="text" name="prenom" v-model="prenom">
<input type="text" maxlength="10" name="tel" v-model="tel">
<input type="text" name="mail" v-model="mail">
- créez 4 propriétés calculées, pour chacun des champs, pour en vérifier la conformité
- champ
nom
etprenom
non vides, champtel
numérique à 10 chiffres, champemail
un email
- champ
Vue.createApp({
computed: {
validNom() {
return this.nom != '';
},
validTel() {
return this.tel.length == 10 && !isNaN(this.tel);
},
validMail() {
let regex = /^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$/;
return regex.exec(this.mail);
}
}
});
- ajoutez ensuite l’événement
submit
sur le formulaire, et exécutez une fonction - cette fonction doit empêcher la validation du formulaire si au moins un champ est mal rempli
<form action="#" method="get" @submit="validate">
Vue.createApp({
methods: {
validate(event) {
if ( ... ) {
event.preventDefault();
}
}
}
});
Enfin, ajoutez une classe erreur
sur chaque champ mal rempli. Pour cela :
- créez une propriété
errors
, qui doit être un objet littéral avec 4 propriétés pour les 4 champs
Vue.createApp({
data() {
return {
errors: {
nom: false,
prenom: false,
tel: false,
mail: false
}
};
}
});
- utilisez ces propriétés pour ajouter conditionnellement une classe
<input type="text" name="nom" v-model="nom" :class="{ error: errors.nom }">
- pensez à changer à
true
dans la fonctionvalidate
Vue.createApp({
methods: {
validate(event) {
this.errors.nom = !this.validNom;
...
}
}
});
- ajoutez également en CSS le changement de style
.error {
background: red;
}