Bonjour à tous, 

j'ai créé un code qui évite que le formulaire soit soumis en appuyant su la touche entrée 

mon code est : 

<script>
    document.getElementById('new').addEventListener('keypress',(event)=>{ if(event.key == 'Enter' && event.target !== '<input type="submit" value="envoyer">'){
        event.preventDefault();
        console.log(event.target);
        event.target.nextElementSibling.focus();
    }
    })

C'est super ça marche, mais je voudrais que quand on se trouve sur "envoyer"  que le formulaire se soumette normalement d'où la condition 

if(event.key == 'Enter' && event.target !== '<input type="submit" value="envoyer">'){

normalement quand je suis sur le submit je ne suis plus dans la condition donc mon action s'exécuterait comme normalement et devrait soumettre; ben non, là est mon erreur 

Bonjour,

if (event.key === 'Enter' && event.target.type !== 'submit') 

Ton formulaire a bien pour ID new ?

Thomas D a écrit:

Bonjour,

if (event.key === 'Enter' && event.target.type !== 'submit') 

Ton formulaire a bien pour ID new ?

oui , merci beaucoup! 

je peux demander pourquoi l'autre solution (celle que j'ai codé) ne fonctionne pas?  

born1 a écrit:

je peux demander pourquoi l'autre solution (celle que j'ai codé) ne fonctionne pas?  

Bien sûr! J'aurais même dû le préciser dans mon message précédent.

event.target retourne l'objet sur lequel l'évènement a lieu. Or, tu essayes de comparer cet objet à une chaîne de caractère. Donc ça ne fonctionne pas!

De mon côté, event.target.type renvoie 'submit' au format string que je peux donc comparer à une chaîne de caractère. 

ah ok !!!

Mille merciS

puis-je demander autre chôse plutôt que d'ouvrir un sujet ? 

J'ai  créé un formulaire, qui quand il est soumis lance une fonction de contrôle des informations remplis, tels que le nombre de caractère, la validation des options, etc ...

j'ai donc une fonction qui fait tout ça et qui me retourne toutes les erreurs si il y en a 

exemple:

le titre n'est pas correct, 

l'option n'est pas choisi 

j'ai créé une div qui est inséré avant le formulaire, mais si le formulaire est soumis une seconde fois avec une ou des erreurs, j'ai une seconde div et non un remplacement de la 1ère div , ce qui est normal, mais pas l'action que je voudrais! 

serait-il possible d'être éclairé? 

mon code est: 

    form.addEventListener('submit', (event) =>{ 
        checkForm();
        if(checkForm().length>0){
            event.preventDefault();
            var divErr = document.createElement("div");
            divErr.id = 'erreur';
            var list = document.createElement("ul");
            divErr.append(list);
            var form = document.getElementById('new');
            var parent = document.getElementById('new').parentElement;
            parent.insertBefore(divErr, form);
            for (i = 0; i<checkForm().length; i++){
                var detailList = document.createElement("li");
                list.appendChild(detailList);
                detailList.appendChild(document.createTextNode(checkForm()[i]));
            }
        }
    })

Il faudrait que dans ta fonction, tu supprimes le contenu de ta liste ul avant d'arriver dans ta boucle for. Pour ça, il faut également que tu crées tes éléments une seule et unique fois.

form.addEventListener('submit', (event) =>{
    checkForm();
    if(checkForm().length>0){
        event.preventDefault();
        // if (je n'ai pas déjà une div d'id erreur)
          var divErr = document.createElement("div");
          divErr.id = 'erreur';
          var list = document.createElement("ul");
          divErr.append(list);
          var form = document.getElementById('new');
          var parent = document.getElementById('new').parentElement;
	       parent.insertBefore(divErr, form);
          
        // reset du contenu de ma liste list 
        for (i = 0; i<checkForm().length; i++){
            var detailList = document.createElement("li");
            list.appendChild(detailList);
            detailList.appendChild(document.createTextNode(checkForm()[i]));
        }
    }
})

-
Edité par Thomas D 21 février 2019 à 9:43:22

merci