title: How to use "required" attribute in a form, when we use e.preventDefault()?
body: <p>I need to make a form in html5, no problem. But this form needs the e.preventDefault on the submit button, to add some links on a new page. And the inputs in the form must have the "required" attribute. 
  So my problem is, when I don't use e.preventDefault, "required" works, but my new link doesn't appears on my page.
  If I use e.preventDefault on submit button, my new links appears with the others, but the problem is "required" doesn't work on the inputs, when I submit the form...</p>
  
  <p>Thank you</p>
  
  <p>Here is my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 
  Activité 1
  */
  
  // Liste des liens Web à afficher. Un lien est défini par :
  // - son titre
  // - son URL
  // - son auteur (la personne qui l'a publié)
  var listeLiens = [
      {
          titre: "So Foot",
          url: "http://sofoot.com",
          auteur: "yann.usaille"
      },
      {
          titre: "Guide d'autodéfense numérique",
          url: "http://guide.boum.org",
          auteur: "paulochon"
      },
      {
          titre: "L'encyclopédie en ligne Wikipedia",
          url: "http://Wikipedia.org",
          auteur: "annie.zette"
      }
  ];
  
  var zoneLiensElt = document.createElement("div");
  zoneLiensElt.id = "zoneliens";
  var contenuElt = document.getElementById("contenu");
  contenuElt.appendChild(zoneLiensElt);
  
  function afficherLiens() {
  
      listeLiens.forEach(function (lien) {
      
      // Définition des variables du DOM
      
          var divElt = document.createElement("div");
          var lienElt = document.createElement("a");
          var brElt = document.createElement("br");
          var spanElt = document.createElement("span");
          var urlElt = document.createTextNode(" " + lien.url);
          var auteurElt = document.createTextNode("Ajouté par " + lien.auteur);
          var espaceLiensElt = document.createElement("div");
          espaceLiensElt.id = "liens";
  
      // Définition des liens
      
          lienElt.href = lien.url;
          lienElt.style.color = "#428bca";
          lienElt.textContent = lien.titre;
          lienElt.style.fontWeight = "bold";
          lienElt.style.textDecoration = "none";
          divElt.classList.add("lien");
      
      // Intégration des éléments
      
          divElt.appendChild(lienElt);
          spanElt.appendChild(urlElt);
          spanElt.appendChild(brElt);
          spanElt.appendChild(auteurElt);
          divElt.appendChild(spanElt);
      
          espaceLiensElt.appendChild(divElt);
          zoneLiensElt.appendChild(espaceLiensElt);
      
      });
  }
  
  afficherLiens();
  
  // Création du bloc contenant le bouton et le formulaire
  
  contenuElt.insertAdjacentHTML("afterbegin", '&lt;div id="zoneform"&gt;&lt;/div&gt;');
  var boutonElt = document.createElement("button");
  boutonElt.textContent = "Ajouter un lien";
  var zoneFormElt = document.getElementById("zoneform");
  zoneFormElt.id = "zoneform";
  zoneFormElt.appendChild(boutonElt);
  zoneFormElt.style.marginBottom = "20px";
  
  // Création du formulaire et des variables du DOM
  
  var formElt = document.createElement("form");
  var auteurElt = document.createElement("input");
  var titreElt = document.createElement("input");
  var urlElt = document.createElement("input");
  var ajouterElt = document.createElement("input");
  var labelAuteurElt = document.createElement("label");
  var labelTitreElt = document.createElement("label");
  var labelUrlElt = document.createElement("label");
  
  
  // Création du champ auteur
  labelAuteurElt.setAttribute("for", "auteur");
  auteurElt.id = "auteur";
  auteurElt.name = "auteur";
  auteurElt.type = "text";
  auteurElt.setAttribute("placeholder", "Entrez votre nom");
  auteurElt.setAttribute("required", "required");
  auteurElt.style.width = "300px";
  auteurElt.style.margin = "10px";
  
  // Création du champ titre
  labelTitreElt.setAttribute("for", "titre");
  titreElt.id = "titre";
  titreElt.name = "titre";
  titreElt.type = "text";
  titreElt.setAttribute("placeholder", "Entrez le titre du lien");
  titreElt.setAttribute("required", "required");
  titreElt.style.width = "300px";
  titreElt.style.margin = "10px";
  
  // Création du champ url
  labelUrlElt.setAttribute("for", "url");
  urlElt.id = "url";
  urlElt.name = "url";
  urlElt.type = "text";
  urlElt.setAttribute("placeholder", "Entrez l'URL du lien");
  urlElt.setAttribute("required", "required");
  urlElt.style.width = "300px";
  urlElt.style.margin = "10px";
  
  // Création du bouton ajouter
  ajouterElt.type = "submit";
  ajouterElt.id = "ajouter";
  ajouterElt.value = "Ajouter un lien";
  ajouterElt.style.margin = "10px";
  
  // Ajout des champs dans le formulaire
  
  formElt.appendChild(labelAuteurElt);
  formElt.appendChild(auteurElt);
  formElt.appendChild(labelTitreElt);
  formElt.appendChild(titreElt);
  formElt.appendChild(labelUrlElt);
  formElt.appendChild(urlElt);
  formElt.appendChild(ajouterElt);
  
  // Affichage du formulaire
  
  boutonElt.addEventListener("click", function() {
      zoneFormElt.innerHTML = "";
      zoneFormElt.appendChild(formElt);
  });
  
  // Actions du bouton submit
  
  
  ajouterElt.addEventListener("click", function(e) {
  
      var nouveauLien = {
              titre: titreElt.value,
              url: urlElt.value,
              auteur: auteurElt.value
          };
      
      listeLiens.unshift(nouveauLien);
      zoneLiensElt.innerHTML = "";
      afficherLiens();
      
     e.preventDefault();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background-color: #eee;
      margin-left: 30px;
      margin-right: 30px;
  }
  
  span {
      font-weight: normal;
      font-size: 80%;
  }
  
  .lien {
      background: white;
      padding: 10px;
      margin-bottom: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="../css/liensweb.css"&gt;
      &lt;title&gt;Activité 2&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Activité 2&lt;/h1&gt;
  
      &lt;!-- Les nouveaux éléments sont ajoutés dans cette balise --&gt;
      &lt;div id="contenu"&gt;
      &lt;/div&gt;
  
      &lt;script src="../js/liensweb.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>