Animation de formulaire avec Jquery
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Utilisation d'animations de formulaire simples
- 3.1- Création du formulaire
- 4- Création du fichier JS
- 4.1- Création du fichier CSS
- 4.2- Explication
- 4.3- Ajouter nos styles d'animation au formulaire
- 5- Animations de validation de formulaire
- 5.1- validation de formulaire de base
- 5.2- Explication
- 5.2.1- Sommaire du cours jQuery
Animation d’images en Jquery
-
Objectifs
- Dans ce tutoriel, nous aborderons les sujets suivants:
- Animation du formulaire lorsque l’utilisateur déplace le curseur de sa souris sur les champs du formulaire
- Modification de la couleur d’arrière-plan des champs de saisie une fois que l’utilisateur clique sur l’un d’eux
- Animation de l’apparence du formulaire en fonction de la validation de formulaire
-
Présentation
- Les animations de formulaire peuvent être utilisées pour de nombreuses raisons, notamment lorsque l’utilisateur interagit avec le formulaire.
- Plus précisément, les formulaires peuvent être utilisés lorsque le curseur entre ou sort de nos éléments de formulaire (zone de texte).
- Les animations sont également idéales pour indiquer les erreurs de validation de formulaire.
- Ces animations auront généralement de légers changements de couleur sur les entrées du formulaire pour donner à l’utilisateur une meilleure expérience lors du remplissage du formulaire et pour rendre le flux plus facile à suivre.
-
Utilisation d’animations de formulaire simples
-
Création du formulaire
- Nous allons créer un formulaire HTML en utilisant les étapes suivantes. Après avoir créé le formulaire, nous ajouterons une animation de validation de formulaire.
- Commencez par créer un nouveau fichier HTML appelé formulaireanime.html et enregistrez-le dans votre dossier jquery-animation (crée précédemment).
- Ensuite, nous placerons le code suivant dans la balise <body>
- Nous devrons ensuite ajouter le CDN de la bibliothèque jQuery UI, en ajoutant le code suivant:
-
Création du fichier JS
- Créez un nouveau fichier appelé formulaireanime.js, enregistrez-le sous le dossier jquery-animation et ajoutez le code suivant:
-
Création du fichier CSS
- Créez un nouveau fichier appelé formulaireanime.css, enregistrez-le sous le dossier jquery-animation et ajoutez le code suivant:
- À ce stade, le formulaire devrait ressembler à la capture d’écran suivante:
-
Explication
- La première section de code que nous avons ajoutée est la structure squelette HTML que nous utiliserons pour les exemples de code de ce chapitre (animation avec jquery). Nous avons utilisé un identifiant sur le formulaire à des fins de ciblage général.
- Nous changerons cet ID plus tard dans le chapitre une fois que nous aurons ajouté un autre formulaire. Évidemment, ces formulaires n’ont pas d’action car nous n’avons pas besoin de les soumettre pour voir nos animations.
-
Ajouter nos styles d’animation au formulaire
- Nous avons ajouté tout le code dont nous avions besoin pour le formulaire, maintenant, ajoutons quelques styles au formulaire pour que les styles d’animation fonctionnent.
- Ajoutez ce code près du bas de la feuille de style que nous avons créée entre les styles pour input: focus et #form1 input [type = submit]:
- Maintenant, prévisualisons le formulaire avec nos styles nouvellement ajoutés et prenons-le pour un tour. Vous remarquerez que lorsque vous survolez chacune des entrées de texte, une bordure rouge apparaît progressivement et disparaît lentement lorsque nous éloignons le curseur de la souris de l’entrée de texte.
- En cliquant sur les entrées de texte, la couleur d’arrière-plan devient également rouge. Lorsque nous cliquons loin de l’entrée focalisée, la couleur d’arrière-plan rouge s’estompe lentement pour revenir à sa couleur d’origine
-
Animations de validation de formulaire
- La validation de l’envoi du formulaire de l’utilisateur est un excellent moyen de s’assurer que nous récupérons les informations correctes de nos utilisateurs.
- Pour améliorer la convivialité du formulaire, nous allons couvrir quelques méthodes d’animation qui traitent de la validation du formulaire.
- Nous allons commencer par la validation de base du formulaire et construire à partir de là.
-
validation de formulaire de base
- Nous allons créer une validation de formulaire en utilisant une alerte pour dire à l’utilisateur ce qui ne va pas avec la soumission du formulaire.
- Tout d’abord, nous devrons placer le code suivant dans la fonction jquery après le code précédemment ajouté:
-
Explication
- Nous avons utilisé le gestionnaire
click()sur le bouton d’envoi pour déclencher la vérification de validation de formulaire. - Pour cet exemple, nous avons utilisé
preventDefault()afin que lorsque nous cliquons sur le bouton d’envoi, le hachage d’URL ne change pas. Assurez-vous de supprimer cette ligne lorsque vous lancez ce code dans les déserts d’Internet. - La méthode
each()est utilisée pour cibler toutes les inputs dans le formulaire. - Une instruction if est utilisée pour la restreindre à toutes les inputs (en utilisant $(this) puisque nous sommes déjà dans la méthode each()), dont la valeur est vide.
- Chaque fois que l’instruction if renvoie true, nous allons ajouter à la variable msg_error.
- Nous avons utilisé la valeur d’espace réservé de l’entrée vide que nous avons définie précédemment comme première partie du message d’erreur.
- Nous avons ajouté
can't be left blankpour le reste du message d’erreur de validation et le terminer avec une nouvelle ligne (\ n), afin que tous les messages d’erreur ne soient pas sur la même ligne dans la fenêtre de dialogue. - Enfin, nous devons nous assurer qu’il y a même un message d’erreur à afficher, nous vérifions donc si la variable
msg_errorrenvoie true. - Si c’est le cas, nous utiliserons
alert()avec la variablemsg_errorpour lancer la fenêtre de dialogue. Sinon, nous utiliseronsalert()pour indiquer à l’utilisateur que le formulaire a été soumis avec succès.
<form id="form1">
<input type="text" placeholder="Prénom">
<input type="text" placeholder="Nom">
<input type="text" placeholder="Adresse électronique">
<input type="text" placeholder="Numéro de téléphone">
<input type="submit" value="Submit">
</form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
$("input").hover( function() {
$(this).addClass("hover", 500); },
function() {
$(this).removeClass("hover", 500);
});
$("input").focus(function() {
$(this).addClass("focus", 500);});
$("input").blur(function() {
$(this).removeClass("focus", 500);
});
});form {
float:left; margin:5px;}
input { display:block;
width:200px;
padding:10px;
border-radius:3px;
background:#F5F5F5;
border:1px solid #D5D5D5;}
input[type=submit] { width:auto;
border:0;
color:#FFF;
text-transform:uppercase;}
input:focus {outline:0;}
#form1 input[type=submit] {
background:#FF6B6B; border:1px solid #FF3A3A;}
#form1 input.hover{border:1px solid #FF7F7F;}
#form1 input.focus{ background:#FFD8D8; border:1px solid #FF7F7F;}Ces animations peuvent également être réalisées à l’aide de transitions CSS3.
$("#form1 input[type=submit]").click(function(e) {
e.preventDefault();
var msg_error = "";
$("#form1 input[type=text]").each(function() {
if ($(this).val() == "") {
msg_error += $(this).attr("placeholder") + "ne peut pas être laissé vide.\n";
}
});
if (msg_error) {
alert(msg_error);
} else {
alert("Formulaire envoyé avec succès!");
}
});Source:Livre JQuery 2.0 Animation Techniques Beginner’s Guide
Auteur: Culpepper, Adam, Wellman, Dan
Date: 2013
