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 :

Inscription

Nom

Prénom

Tel

Email

Envoyer

• 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 et prenom non vides, champ tel numérique à 10 chiffres, champ email un email

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 fonction validate

Vue.createApp({
    methods: {
        validate(event) {
            this.errors.nom = !this.validNom;

            ...
        }
    }
});

• ajoutez également en CSS le changement de style

.error {
    background: red;
}