Ajout Bootstrap et exemple validation forms

exemples/liste.json

@@ -8,5 +8,14 @@
   { "slug": "evenements-3-keyup", "title": "Evènements 3 : keyup" },
   { "slug": "ajax-requete-randomuserme", "title": "AJAX - Requête randomuser.me" },
   { "slug": "ajax-requete-themoviedborg", "title": "AJAX - Requête themoviedb.org" },
-  { "slug": "exercice-1-verifier-un-formulaire", "title": "Exercice 1 : vérifier un formulaire", "test": true }
+  {
+    "slug": "exercice-1-verifier-un-formulaire",
+    "title": "Exercice 1 : vérifier un formulaire",
+    "test": true
+  },
+  { "slug": "onglets", "title": "Onglets" },
+  {
+    "slug": "validation-de-formulaires-bootstrap",
+    "title": "Validation de formulaires Bootstrap"
+  }
 ]

exemples/validation-de-formulaires-bootstrap/contenu.html

@@ -0,0 +1,21 @@
+<form>
+  <div class="form-group">
+    <label for="exampleInputUsername1">Username</label>
+    <input type="email" class="form-control" id="exampleInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
+  </div>  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-check">
+    <label class="form-check-label">
+      <input type="checkbox" class="form-check-input">
+      Check me out
+    </label>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>

exemples/validation-de-formulaires-bootstrap/script.js

@@ -0,0 +1,19 @@
+$('#exampleInputUsername1')
+.change(function(e) {
+    var inputUsername = $(this);
+    var username = inputUsername.val();
+    var re = /^[A-Za-z][A-Za-z0-9_]+$/;
+    var isUsernameValid = username.match(re);
+    if(! isUsernameValid) {
+        inputUsername
+        .addClass('is-invalid')
+        .removeClass('is-valid');
+    }
+    else {
+        inputUsername
+        .addClass('is-valid')
+        .removeClass('is-invalid');
+    }
+    
+    
+})