Discussion :

[bonpier]

Bonjour,

Voila je suis débutant dans le javascript et je voudrais savoir comment faire pour faire des contrôles de champs. Je vous explique mon problème :

J'ai 5 input, je souhaite, que si j'ai dépasser 100 en additionnant les 5 input, qu'un message d'alerte apparaisse directement en pendant que je

remplis les inputs et si sa n'a pas dépasser les 100, on peut continuer a remplir le formulaire.

Voici mon code qui fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function pourcent(){
    var pourt1 = Number(document.getElementById("pourcent1").value);
    var pourt2 = Number(document.getElementById("pourcent2").value);
    var pourt3 = Number(document.getElementById("pourcent3").value);
    var pourt4 = Number(document.getElementById("pourcent4").value);
    var pourt5 = Number(document.getElementById("pourcent5").value);
 
    if (pourt1+pourt2+pourt3+pourt4+pourt5 > 100) {
        alert('Vous ne devez pas depasser 100%');
    }
        else {
            return true;
        }
}

[headmax]

Il faut créer un événement javascript onkeyup https://javascript.developpez.com/archives/faq-color/?page=formObjs voir onchange et appeler ta function a l'intérieur.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
function pourcent(){
    var pourt1 = Number(document.getElementById("pourcent1").value);
    var pourt2 = Number(document.getElementById("pourcent2").value);
    var pourt3 = Number(document.getElementById("pourcent3").value);
    var pourt4 = Number(document.getElementById("pourcent4").value);
    var pourt5 = Number(document.getElementById("pourcent5").value);
 
    if (pourt1+pourt2+pourt3+pourt4+pourt5 > 100) {
        alert('Vous ne devez pas depasser 100%');
    }
        else {
            return true;
        }
}
 
var inputs = document.querySelectorAll("input[type='text']");
 
for(let i in inputs){
  inputs[i].onkeyup = function(){
    pourcent()
};
}
 
//partie input html j'ai rajouter un attribute pattern afin de forcé les utilisateur a utiliser un pourcentage 0 à 100
<input type="text" pattern="^[1-9][0-9]?$|^100$" id="pourcent5" name="pourcent5"/>

démo : https://codepen.io/headmax/pen/dJEdBK?editors=1011