如何在使用e.preventDefault（）时在表单中使用“required”属性？

Question

我需要在html5中创建一个表单，没问题。但是此表单需要提交按钮上的e.preventDefault，才能在新页面上添加一些链接。并且表单中的输入必须具有“必需”属性。 所以我的问题是，当我不使用e.preventDefault，“必需”的作品，但我的新链接不会出现在我的网页上。 如果我使用e.preventDefault上提交按钮，我的新链接似乎与其他人，但问题是“应当”上的投入是不行的，当我提交表单...

谢谢

这里是我的代码：

/* 
 
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", '<div id="zoneform"></div>'); 
 
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(); 
 
});

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; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="../css/liensweb.css"> 
 
    <title>Activité 2</title> 
 
</head> 
 

 
<body> 
 
    <h1>Activité 2</h1> 
 

 
    <!-- Les nouveaux éléments sont ajoutés dans cette balise --> 
 
    <div id="contenu"> 
 
    </div> 
 

 
    <script src="../js/liensweb.js"></script> 
 
</body> 
 

 
</html>

Answer 1

这是相当多的重复：How to force a html5 form validation without submitting it via jQuery

你会在那里找到文档：

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
• http://www.w3schools.com/js/js_validation_api.asp