🗓️ancien TD04 : vérification front
Validation des données entrées dans les champs des formulaires
Partie 1 - Validation des données
Nous verrons ici comment obtenir nos données dans le format souhaité. Par exemple dans un champs prix, nous voulons que l'utilisateur rentre des chiffres
Attention, la validation coté front ne remplace pas celle coté back. L'utilisateur peut désactiver le javascript ou utiliser la console du navigateur pour contourner très facilement vos vérifications.
Afin de faciliter le développement, nous utiliserons ici le plugin javascript : Parsley.js
Installation du plugin
Téléchargez le javascript et le css du plugin
Ce plugin necessite Jquery
Importez le plugin
Dans votre <head>, ajoutez les lignes suivantes :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="parsley.min.js"></script>
<link rel="stylesheet" href="parsley.css">Activez le plugin sur votre formulaire
Ajoutez l'attribut data-parsley-validate à votre formulaire
<form action="reponse_recherche.php" data-parsley-validate>Activez la vérification des champs
Ici nous souhaitons valider des chiffres, nous allons donc utiliser l'option data-parsley-type="number" sur nos champs
<p>
<label for="duree_mini">Durée minimum (en minutes)</label>
<input type="text" id="duree_mini" name="duree_mini" placeholder="10" data-parsley-type="number">
</p>Testez
Partie 2 - Autocompletion
Afin de faciliter l'usage du site à nos visiteurs, nous avons utiliser la completion automatique sur notre champ de recherche.
L'autocompletion est le fait de proposer des résultats à l'utilisateur au fur et à mesure qu'il tape des caratères dans le champ du formulaire.
Une nouvelle balise HTML5 à la rescousse
La 5ème version d'HTML a apportée son lot de nouveautés, la prise en charge nativement d'une autocomplétion par les navigateurs en fait partie.
Nous allons donc utiliser la balise <datalist>
1) Créez votre liste de propositions
<datalist id="realisateurs">
<option value="Allen">
<option value="Donner">
<option value="Kubrick">
<option value="Nolan">
<option value="Tarantino">
<option value="Tessari">
</datalist>2) Lier la liste avec l'input
Ajoutez l'attribut list afin de lier votre champ de texte à votre liste
<input type="search" list="realisateurs" id="real" name="real" />Exemple pour un formulaire de recherche de réalisateurs
<form action="reponse_recherche.php">
<label for="real">Entrez un nom de réalisateur :</label>
<input type="search" list="realisateurs" id="real" name="real" />
<datalist id="realisateurs">
<option value="Allen">
<option value="Donner">
<option value="Kubrick">
<option value="Nolan">
<option value="Tarantino">
<option value="Tessari">
</datalist>
<input class="btn btn-primary" type="submit" value="Rechercher" id="submit">
</form>Bug avec l'autofill ou remplissage automatique des champs
Si vous avez l'habitude d'enregistrer vos informations de formulaire (login, email,...), il peut se produire un effet particulier ou la navigateur vous propose en plus du datalist, le remplissage avec vos infos.
Dans ce cas on doit tricher et peut desactiver le remplissage automatique avec l'attribut, autocomplete ainsi que lui donner un name contenant le mot clé search
Exemple :
<input type="search" autocomplete="off" list="realisateurs" id="real" name="searchReal" />Allez plus loin avec les plugins
Si vous souhaitez aller plus loin des plugins d'autocomplétion plus performants et personnalisables existent :
Dernière mise à jour