Contrôler les valeurs d'un formulaire php avant validation

**happyusers** · 06/10/2024, 09h52

Je voudrais contrôler les valeurs d'un formulaire avant de le soumettre au traitement par code php, plus exactement vérifier que les champs saisis ne sont pas vides. Si je fais cela avec des champs input distincts, j'y parviens mais je dois le faire avec un tableau de dimension indéfinie (de 2 à 4 éléments). Je traite, en html, ces éléments comme f[]. Ce genre de tableau passe en POST par exemple. Mais pour vérifier les éléments en javascript, je n'y arrive pas. Dans le meilleur des cas, le contrôle se fait sur le premier champ f[] mais pas sur le deuxième. Quelqu'un aurait-il un conseil pour me débloquer..
voici le code :

Code html :

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
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1>Contact</h1>
<?php
        echo "<form method='post' action='record.php'>";
        echo "<input type='text' id='f[]' name='f[]'>";
        echo "<input type='text' id='f[]' name='f[]'>";
        echo "<input type='submit'>";
        echo "</form>";
 
 
?>
    <script>
        document.forms[0].addEventListener("submit", function(evenement) {
            if (document.getElementById("f[]").value == "") {
                evenement.preventDefault();
                alert("Champ 1 Tapez une valeur numérique...");
                document.getElementById("email").focus();
            } else if  (document.getElementById("f[1]").value == "") {
                evenement.preventDefault();
                alert("Champ 2 Tapez une valeur numérique .");
                document.getElementById("message").focus();
 
            }
        });
    </script>
 
</body>

**mathieu** · 06/10/2024, 15h30

une remarque qui n'a pas de lien direct avec votre question, les identifiants des balises doivent être uniques sur une page :
https://developer.mozilla.org/fr/doc..._attributes/id

pour votre question de sélection, vous pouvez mettre une classe css à tous les champs que vous voulez vérifier. ensuite, vous pourrez les sélectionner avec cette méthode javascript :
https://developer.mozilla.org/fr/doc...ntsByClassName

**happyusers** · Hier, 10h46

Merci mathieu
ce qui me laissait un espoir de trouver un moyen de vérifier les valeurs entrées dans le tableau c'est un exemple glané sur des forums : cet exemple renseigne l'élément montant[2] comme 1000-montant[0]-montant[1] dès qu'un changement de valeur est détecté dans la forme. Ceci n'est il pas transposable à mon cas ?
Cependant, je ne comprends pas la syntaxe employée, notamment le inp.forEach((v,i,t)!!! et l'usage qui est fait de t[] par la suite.
Ne serait-ce pas une piste pour mon cas?

Code html :

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
<form>
	<input type="number" name="montant[]">
	<input type="number" name="montant[]">
	<input type="text" readonly name="montant[]">
</form>
<script>
const inp=document.forms[0]['montant[]']
inp.forEach((v,i,t)=>{
        v.addEventListener("change",(e)=>{
                if(Number(t[0].value)>0 && Number(t[1].value)>0
                && Number(t[0].value)+Number(t[1].value)<1000){
                        t[2].value=1000 - t[0].value - t[1].value
                }
                else{
                        t[2].value="erreur de saisie"
                }
        })
})
</script>

**mathieu** · Hier, 11h28

forEach permet de parcourir un tableau :
https://developer.mozilla.org/fr/doc.../Array/forEach

n'allez pas trop vite, pour le moment vous vouliez récupérer la liste des champs texte, est ce que cela fonctionne ?

**happyusers** · Hier, 13h04

Oui les valeurs non indexées passent sans problème je n'ai de difficulté qu'avec le tableau.
Je commence à mieux comprendre le code utilisé grâce à la documentation de forEach. La liste d'arguments v,i,t vaut pour valeur index tableau d'où l'utilisation de t[1].
Ce que je ne sais pas faire c'est invoquer ce code lorsque on clique pour soumettre, dois je utiliser addeventlistener avec l'événement submit?
Dans le code je testerais chaque élément de tableau pour vérifier qu'il est non vide et sinon, je termine par evenement.prevent.default?
Merci encore pour vos conseils

Contrôler les valeurs d'un formulaire php avant validation

JavaScript

Discussions similaires

Partager

Partager