Question

我需要在html5中创建一个表单，没问题。但是这个表单需要在提交按钮上添加e.preventDefault，才能在新页面上添加一些链接。表单中的输入必须具有“required”属性。所以我的问题是，当我不使用e.preventDefault时，“required”有效，但我的新链接没有出现在我的页面上。如果我在提交按钮上使用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

您可以在那里找到文档：

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

1 个答案: