Un autre exemple: évènement submit (validation)

exemples/evenements-1/contenu.html

@@ -0,0 +1,16 @@
+<h5>Evènement click</h5>
+<button id="events1-btn1">Click me!</button>
+
+<h5>Evènement submit</h5>
+<form id="events1-form1">
+    <input type="text" name="name" placeholder="Votre nom" />
+    <input type="text" name="email" placeholder="Votre email" />
+    <div style="color:red;display:none;">Email invalide</div>
+    <button type="submit">Envoyer &raquo;</button>
+</form>
+<div id="events1-form1-resultat" style="display:none">
+    Vous avez entré:<ul>
+        <li>Nom: <span id="result-name"></span></li>
+        <li>Email: <span id="result-email"></span></li>
+    </ul>
+</div>

exemples/evenements-1/script.js

@@ -0,0 +1,31 @@
+// Déjà vu : simple gestionnaire de click
+$('#events1-btn1').click(function() {
+    $(this).toggleClass('blue');
+});
+
+// Gestionnaire de submit
+$('#events1-form1').submit(function(e) {
+    // On empêche la soumission du formulaire à un serveur
+    e.preventDefault();
+    // On sauvegarde la référence au formulaire car on va s'en servir plusieurs fois
+    var form = $(this);
+    // Encore un sélecteur: input avec attribut ayant la valeur demandée
+    var name = form.find('input[name="name"]').val();
+    var inputEmail = form.find('input[name="email"]');
+    var email = inputEmail.val();
+    // Vérification TRES basique de l'email
+    // Si elle échoue on affiche une erreur
+    if(! email.includes('@') || ! email.includes('.')) {
+        inputEmail.css('border', '1px solid red');
+        form.find('input[name="email"] + div').show();
+    }
+    // Sinon, on remplit les résultats dans
+    // la div prévue pour, on montre cette
+    // div, et on cache le formulaire
+    else {
+        $('#result-name').html(name);
+        $('#result-email').html(email);
+        $('#events1-form1-resultat').show();
+        form.hide();
+    }
+})

exemples/liste.json

@@ -1 +1,9 @@
-[{"slug":"selecteurs-basiques","title":"Sélecteurs basiques"},{"slug":"selecteurs-multiples","title":"Sélecteurs multiples"},{"slug":"ajax-requete-randomuserme","title":"AJAX - Requête randomuser.me"},{"slug":"ajax-requete-themoviedborg","title":"AJAX - Requête themoviedb.org"},{"slug":"selecteurs-filtres","title":"Sélecteurs : filtres"},{"slug":"selecteurs-filtres-2","title":"Sélecteurs : filtres 2"}]
+[
+  { "slug": "selecteurs-basiques", "title": "Sélecteurs basiques" },
+  { "slug": "selecteurs-multiples", "title": "Sélecteurs multiples" },
+  { "slug": "selecteurs-filtres", "title": "Sélecteurs : filtres" },
+  { "slug": "selecteurs-filtres-2", "title": "Sélecteurs : filtres 2" },
+  { "slug": "evenements-1", "title": "Evènements 1" },
+  { "slug": "ajax-requete-randomuserme", "title": "AJAX - Requête randomuser.me" },
+  { "slug": "ajax-requete-themoviedborg", "title": "AJAX - Requête themoviedb.org" }
+]