How to use "required" attribute in a form, when we use e.preventDefault()?

Question

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...

Thank you

Here is my 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", '<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>

score 0 · Accepted Answer · edited May 23 '17 at 11:53

0

This is pretty much a duplicate of: How to force a html5 form validation without submitting it via jQuery

You'll find documentation there:

edited May 23 '17 at 11:53

Community

1
1

answered Jan 10 '17 at 05:30

Marc-Antoine Parent

340
1
8

Thank you so much ! I use the checkValidity() method, and it works. Thank you very much for your contribution. – Romain Jan 10 '17 at 16:40
My pleasure! Don't hesitate to Google your question next time in order to limit the duplicates. – Marc-Antoine Parent Jan 10 '17 at 16:48
Sorry, I was wrong ! The problem is always here ! When I use "element.validity.valueMissing", it doesn't work. And same case when I use "element.checkValidity()"'. However, it works when I use "element.value.validity.valueMissing" or "element.value.checkValidity(). When I say it works, I mean the inputs become red with the browser's message when an input is empty. Right. But the console logs an error message like (TypeError: urlElt.validity is undefined), and even I modifie the values of the inputs, it doesn't work... Excuse my english, I'm french ! – Romain Jan 10 '17 at 21:41
Have you managed to fix the problem? (By the way I speak french too, but just to make sure this conversation can be followed by as many people as possible, we're better to keep it english on StackOverflow :) ) – Marc-Antoine Parent Jan 12 '17 at 06:49
YES ! Just for one minute ! The problem was to use the type "submit" for the event, and to use it on the "form" element, not on the input. Thank you very much for yours answers ! – Romain Jan 12 '17 at 16:34

How to use "required" attribute in a form, when we use e.preventDefault()?

1 Answers1