0
私はhtml5で問題なくフォームを作成する必要があります。しかし、このフォームでは、新しいページにいくつかのリンクを追加するために、送信ボタンにe.preventDefaultが必要です。フォームの入力には「必須」属性が必要です。 私の問題は、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>
はありがとうございました!私はcheckValidity()メソッドを使用し、それが動作します。あなたの貢献に感謝します。 – Romain
私の喜び!重複を制限するために、次回Googleに質問してください。 –
申し訳ありませんが、私は間違っていました!問題はいつもここにある!私が "element.validity.valueMissing"を使用すると、動作しません。私が "element.checkValidity()"を使用した場合も同じです。しかし、 "element.value.validity.valueMissing"または "element.value.checkValidity()"を使用すると動作します。正しく動作するとは、入力が空のときに入力がブラウザのメッセージで赤色になることを意味します。しかし、コンソールは(TypeError:urlElt.validityは未定義です)というエラーメッセージを記録し、入力値を変更しても動作しません。私の英語はすみません、フランス語です! – Romain