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

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

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, 16h30

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** · 07/10/2024, 11h46

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
<form>
	<input type="number" name="montant[]">
	<input type="number" name="montant[]">
	<input type="text" readonly name="montant[]">
</form>

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
<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** · 07/10/2024, 12h28

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** · 07/10/2024, 14h04

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

**happyusers** · 08/10/2024, 11h42

Sur la base de l'exemple que je donnais avec le tableau montant, j'ai essayé de répondre à mes besoins. J'ai retenu l'événement "submit" et voulais que, lorsque il est détecté et que les deux premiers montants sont vides, le formulaire ne soit pas soumis et qu'il y ait un message d'erreur. Cela ne semble pas fonctionner. Il ne se passe rien. L'écran est rafraichi avec la valeur des montants indiquée en argument ("ex5.html?montant[]=&montant[]=&montant[]=").
Le code testé est le suivant :

Code HTML :

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

1
2
3
4
5
6
<form>
	<input type="number" name="montant[]">
	<input type="number" name="montant[]">
	<input type="text" readonly name="montant[]">
        <input label="OK" type="submit">
</form>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
  <script>
          document.forms[0].addEventListener("submit", function(evenement) {
                const inp=document.forms[0]['montant[]']
             inp.forEach((v,i,t)=>{
  		if(Number(t[0].value)=='' && Number(t[1].value)=='' {
                     evenement.preventDefault();
                     alert("Tapez un CHIFFRE dans les cases 1 et 2.");
  		}
   	     })
  })
  </script>

Si vous avez des idées pour implémenter cette fonction qui somme toute doit être assez courante dans les formulaires de saisie, faites m'en part, je vous serai reconnaissant.

**gabi7756** · 08/10/2024, 12h37

Bonjour,
Petit problème ici qui aurait pu être éclairci en regardant la console ( parenthèse fermante dans le if ):

Error console :

SyntaxError: Unexpected token '{'"

Code javascript :

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

1
2
 
if(Number(t[0].value)=='' && Number(t[1].value)=='' ){

Au passage de met pas ton alerte dans ton forEach, un alert suffit pour avertir qu'il manque un champs ou deux.

Code complet :

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
 
document.forms[0].addEventListener("submit", function(evenement) {
    var cancel=false
    const inp=document.forms[0]['montant[]']
    inp.forEach((v,i,t)=>{
        if(Number(v.value)=='' ){
            cancel = true
        }
    })
    if(cancel){
        evenement.preventDefault()
        alert("Un input n'est pas renseigné");
    }
})

Soit j'ai mal lu soit je sais pas , si jamais tu veux juste vérifié qu'un des inputs est renseigner bah tu peux garder ta logique pour ton foreach. Moi perso je trouve ca bizarre donc j'ai fais a ma sauce lol

Cdt,

**Pytet** · 08/10/2024, 13h14

Bonjour,

Tu peux simplement utiliser l'attribut html required si tu veux vérifier que les inputs ne sont pas vides :

Code html :

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

1
2
3
4
5
6
<form>
  <input type="number" name="montant[]" required>
  <input type="number" name="montant[]" required>
  <input type="text" readonly name="montant[]">
  <input type="submit" value="OK">
</form>

Pas d'attribut label sur un input type submit, utilise l'attribut value à la place.

Voir éventuellement l'attribut pattern pour ajouter d'autres contrôles : https://developer.mozilla.org/en-US/...ibutes/pattern

Petit rappel de sécurité : les contrôles sur les données devront être refait en PHP lors du traitement du formulaire. La validation des données en html ou javascript est pratique pour l'utilisateur mais aucune garantie que celle-ci soit respectée ("never trust user input").

**happyusers** · 08/10/2024, 13h15

Merci Gabi, tout roule.
Je ne suis pas spécialiste, je ne sais pas utiliser le deboggeur, raison pour laquelle je n'avais pas vu l'erreur.
J'avais bien pensé à ta solution mais ne voulais pas trop m'écarter de la structure qui pour moi fonctionnait avec le forEach..
Ton script marche parfaitement.. sauf que j'ai supprimé évidemment l'input readonly qui était forcément vide
Merci à tous tutto bene je mets résolu.

**happyusers** · 08/10/2024, 13h18

Merci Pytet egalement
petit à petit, je vais peut être monter en compétence, apprendre sur le tas n'est pas si facile.

**happyusers** · 08/10/2024, 18h28

Quelle corvée programmer en javascript quand on n'y connait rien!
J'ai retenu la solution de Pytet, j'ai utilisé required... Plus simple
Mais si je voulais perfectionner - ou être un peu moins ignorant - y a-t- il une solution pour remplacer le forEach de Gabi par un contrôle de certaines valeurs du tableau seulement - disons indice entre n1 et n2 ces deux variables étant disponibles dans le code php?
une modif du style :

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
 
 
 
document.forms[0].addEventListener("submit", function(evenement) {
    var cancel=false
    const inp=document.forms[0]['montant[]']
    inp.forEach((v,i,t)=>{
        if (Number(v.value)=='' && i>n1 && i<n2 ){
            cancel = true
        }
    })
    if(cancel){
        evenement.preventDefault()
        alert("Un input n'est pas renseigné");
    }
})

avec évidemment une solution pour récupérer ces variables n1 et n2..
PS : la condition d'égalité s'écrit-elle n===p ou n==p, j'ai lu récemment que c'était 3 signes =

**gabi7756** · 09/10/2024, 14h59

Envoyé par happyusers

avec évidemment une solution pour récupérer ces variables n1 et n2..
PS : la condition d'égalité s'écrit-elle n===p ou n==p, j'ai lu récemment que c'était 3 signes =

Que quelqu'un me reprenne si je dis n'importe quoi,
== Tu vérifies la valeur : true == 'true' <=> boolean == String => true
=== Tu vérifies valeur + type : true==='true' <=> boolean === string => false

Envoyé par happyusers

Quelle corvée programmer en javascript quand on n'y connait rien!
J'ai retenu la solution de Pytet, j'ai utilisé required... Plus simple
Mais si je voulais perfectionner - ou être un peu moins ignorant - y a-t- il une solution pour remplacer le forEach de Gabi par un contrôle de certaines valeurs du tableau seulement - disons indice entre n1 et n2 ces deux variables étant disponibles dans le code php?

J'ai pas compris l'autre demande honnetement. Tu peux toujours les vérifiés "à la main", redonne le cas de base , tu veux faire quoi avec tout tes montants ? Un calcul ? Vérifier qu'ils sont tous saisi ? Au moins un saisi ?
Bref tu m'as compris

**happyusers** · 10/10/2024, 09h11

Je n'ai pas été clair. J'ai créé une interface de saisie du tableau montant dans laquelle l'utilisateur entre les valeurs par groupe de 2 ou 3 ou plus.
Par exemple, si la saisie est faite sur des couples de valeurs, il saisira T1 et T2 et fera ok. L'écran sera raffraichi et les cases T3 et T4 seront mises en évidence pour saisir un nouveau couple. Si je vérifie par forEach, remplir les cases T3 et T4 ne suffira pas. C'est pourquoi je cherche un moyen de ne vérifier que T1 et T2 à la première saisie, T3 et T4 à la deuxième etc.
D'où la logique de vérification par boucle de n1 à n2 dont je ne connais pas la syntaxe exacte.

**gabi7756** · 10/10/2024, 10h13

Bonbonbon ...
Toujours rien compris
Tu dis que lorsque l'on saisie un couple sa rafraichit la page, pourquoi la rafraichir ? Pourquoi mettre en évidence t3 et t4 ? D'ou ils proviennent ? Généré en js je présume ... Mais ca impose de stocker ta précédente saisie dans le local storage , la réafficher potentiellement. Faire tes vérifs non pas sur t1 et t2 mais t3 et t4. Quand est ce que tu sais que tu as fini de saisir de la data ? Parce que la si tu recharge la page pour saisir à chaque fois c'est pas super ... Et puis pourquoi forcé la saisie de 2 valeurs alors que tu disais que il peut y en avoir plusieurs différentes .

Le contexte ?
Si tu veux que l'utilisateur puisse saisir plusieurs fois des montants . Une utilité que tu n'as toujours pas détaillé. Genre pour voir une évolution des montants ? ou voir les montant HT / TC / Total pour un produit ?

Parce que si tu veux en soit saisir de 2 a n valeur pour un champ, tu peux faire une génération de code html en js.
Un select ou input type number pour saisir le nombre de montant que tu veux saisir , un bouton add qui génère les champs à saisir.
Avec un name différent pour chaque association de montant

Code html :

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

1
2
3
4
5
6
7
8
9
 
<div id="1_div" class="divMontant">
<input type="number" name="montant1[]">
<input type="number" name="montant1[]">
</div>
<div id="2_div" class="divMontant">
<input type="number" name="montant2[]">
<input type="number" name="montant2[]">
</div>

Et puis tu fais deux boucle lors de ta vérification la première qui va bouclé sur ton nombre de div de saisie.
Et la deuxième qui boucle sur les champs saisie

Code js :

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

1
2
3
4
5
6
7
8
 
var nbr = document.querySelectorAll('.divMontant')
for (let i = 0; i < nbr; i++) {
// Champs 1 :
var champ = document.querySelectorAll('.divMontant')[i] // La tu récupère ta div qui contient tes inputs 
 //  Et la tu fais tes vérification pour chaque input 
})
}

Ya surement mieux mais la j'ai zappé

Si jamais ta solution a pour but de saisir des montants avec une signification particulière tu peux rajouter un id a tes inputs pour vérifié Et lors de leur génération tu fais des checkbox pour savoir si tel ou tel champ doit être généré.

Cdt

**happyusers** · 10/10/2024, 13h18

Merci Gabi de ta sollicitude
Je ne vous ai pas tout dit pour ne pas embrouiller le sujet. Il s'agit en fait de la saisie des résultats d'un tournoi de bridge pour lequel la paire qui joue en nord/sud rentre le score de chaque donne. Seulement, toutes les 2 ou trois donnes, il change d'adversaire. Le logiciel doit alors lui indiquer l'identité des nouveaux adversaires et permettre la saisie du groupe de donnes suivant. Le tableau des résultats est un tableau HTML géré par PHP (je ne connais pas grand chose d'autre) et l'interface avec JavaScript fonctionne plutôt bien, les résultats antérieurs sont en grisé non modifiables mais sont rappelés et les résultats à saisir sont mis en évidence en couleur. Voilà pourquoi je voudrais contrôler leur saisie correcte avant changement d'écran car après ce n'est plus récupérable.
J'envisageais aussi, par la suite, quelques traitements sur les résultats qui pourraient être utiles au delà du seul contrôle.
Voilà tu sais tout..

**Pytet** · 10/10/2024, 17h26

Une possibilité pour récupérer les montants des inputs par paire pourrait être l'utilisation de l'opération mathématique modulo (opérateur % en javascript).

Pour mon test, j'ai ajouté une classe "montant-input" pour récupérer via querySelectorAll uniquement les input de saisie et pas celui en readonly.

La première boucle permet de construire un tableau nommé donnes (une donne correspond à 13 plis au bridge si je ne me trompe pas), chaque élément du tableau donnes est un objet js correspondant à une donne et contenant le score Nord Sud et le score Est Ouest.
La deuxième boucle permet de parcourir le tableau des donnes et de faire les contrôles nécessaires.

N'hésites pas à utiliser console.log pendant le développement afin d'afficher dans la console les différentes variables à plusieurs endroits de ton script pour mieux comprendre comment celui-ci s'exécute.

Un début d'idée à développer :

Code html :

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

1
2
3
4
5
6
7
8
<form>
  <input type="number" name="montant[]" class="montant-input" value="20" required>
  <input type="number" name="montant[]" class="montant-input" value="50" required>
  <input type="number" name="montant[]" class="montant-input" value="80" required>
  <input type="number" name="montant[]" class="montant-input" value="30" required>
  <input type="text" readonly name="montant[]">
  <input type="button" id="submit-btn" value="OK">
</form>

Code :

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
33
34
35
36
37
38
39
40
41
42
document.getElementById("submit-btn").addEventListener("click", (e) => {
  // récupération des montants par paire
  const inputs = document.querySelectorAll(".montant-input")
 
  let donnes = []
  let i = 0
  let j = 0
 
  for (input of inputs) {
    if (!donnes[j]) {
      donnes[j] = {}
    }
 
    if (i % 2 === 0) {
      donnes[j].nordSud = input.value
    } else {
      donnes[j].estOuest = input.value
      j++
    }
 
    i++
  }
 
  // contrôle sur les paires
  j = 1
 
  for (donne of donnes) {
    console.log(
      "Donne n° " + j + " NS: " + donne.nordSud + " EO: " + donne.estOuest,
    )
 
    if (donne.nordSud > donne.estOuest) {
      console.log("Le score de NS et plus élevé que EO pour cette donne")
    } else if (donne.nordSud < donne.estOuest) {
      console.log("Le score de EO et plus élevé que NS pour cette donne")
    } else {
      console.log("Egalité")
    }
 
    j++
  }
})

**happyusers** · 11/10/2024, 10h08

Merci encore, je teste dès que je peux

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

JavaScript

Discussions similaires

Partager

Partager