Sélectionner les id découlant d'un form pour vérif

Version imprimable

Bonjour,

Je cherche à vérifier si des champs sont vides avant envoi d'un formulaire.

J'ai un code qui marche, que vous pouvez tester ici : https://codepen.io/Cellophile/pen/LYWzdYR
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <form id="form" action="gf.php" method="post" onsubmit=" return check(f,g,h, response)"> <label>Feeling: <input id="f" name=f type="text"></label><br> <label>Feeling: <input id="g" name=g type="text"></label><br> <label>Feeling: <input id="h" name=h type="text"></label> <div id="response"></div><br> <input type="submit" > </form> </html> <script> function check(input, input1, input2, response){ if (input.value == "" || input1.value == "" || input2.value == "") { response.innerHTML = 'la case ne peut rester vide.' return false } else { response.innerHTML = 'bien'; return true } } </script>
Cependant, j'aimerais ne pas avoir à tester chaque champ par son id (là, ça va, il n'y a que 3 éléments, mais imaginons qu'il y en ait plein, ça fait long la condition...).

j'ai testé de mettre le même id à tous les champs text, ça ne marche pas. J'ai essayé de faire quelque chose de global du genre if(form.text == ""){blabla} mais je n'arrive à rien non plus.
Est-ce que vous auriez une idée ?

28/05/2021, 22h33
Doksuri

ajoute un attribut required a tes input... meme pas besoin de JS, et c'est le navigateur qui se charge d'en informer l'utilisateur

developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required (desole, la page n'existe pas en francais)

Merci Doksuri pour ta réponse !
mais elle ne me convient pas tout à fait... Sans doute la question était-elle mal posée, parce que tu as tout à fait raison, dans ce cas précis, aucun besoin de s'embêter avec du javascript...

Alors je repose ma question (espérons que ce soit mieux !)

Voici un autre exemple : https://codepen.io/Cellophile/pen/wvJrybm
Code:

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 <html> <form id="form" action="gf.php" method="post" onsubmit=" return check(fa,fb,fc, response)"> <label>choix 1: </label><input id="fa" name=f type="checkbox"><br> <label>choix 2: </label><input id="fb" name=f type="checkbox"><br> <label>choix 3: </label><input id="fc" name=f type="checkbox"> <div id="response"></div><br> <input type="submit" > </form> </html> <script> function check(fa,fb,fc, response) { if (fa.checked == false && fb.checked == false && fc.checked == false) { response.innerHTML = 'cochez au moins une case.' return false } else { // input is fine -- reset the error message response.innerHTML = 'ok'; return true } } </script>
Ici, je veux qu'au moins une case soit cochée pour valider le formulaire. Et même problème que dans mon précédent message, il m'a fallu sélectionner chaque checkbox indépendamment. Idem, j'ai essayé de leur donner le même id (echec), de faire un if(form.checked != true){blabla}, et même de faire comme pour les radio, de mettre le même name en html et de mettre required sur tous, mais je n'arrive pas à mon résultat.

Je précise aussi pourquoi je cherche à faire ça : cela me permet aussi de personnaliser le message d'erreur, et d'éviter que lors de l'envoi du formulaire mal rempli, ce soit automatiquement la première checkbox qui soit pointée par le message disant qu'il faut la remplir pour valider. ça fait pas propre.

Encore une fois, mon code marche, mais je voudrais savoir s'il existe une manière de récupérer en "descendant" les infos en cascade, du genre form.boite.checkbox... par exemple.

Bonjour,
tu peux tirer avantage de l'objet FormData pour faire des tests en combinant les données de celui-ci et les données attendues dans ton formulaire.

Un exemple étant plus parlant, partons du HTML suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form id="form" action="#" method="GET" onsubmit=" return checkForm()">
  <p><input name="code" value="non visible" type="hidden">
  <p><label>choix 1: <input name="chk[]" value="1" type="checkbox"></label>
  <p><label>choix 2: <input name="chk[]" value="2" type="checkbox"></label>
  <p><label>choix 3: <input name="chk[]" value="3" type="checkbox"></label>
 
  <p><label>radio 1: <input name="rad" value="rad1" type="radio"></label>
  <p><label>radio 2: <input name="rad" value="rad2" type="radio"></label>
  <p><label>radio 3: <input name="rad" value="rad3" type="radio"></label>
 
  <p><label>champ 1: <input name="txt1" value="A" type="text"></label>
  <p><label>champ 2: <input name="txt2" value="B" type="text"></label>
  <p><label>champ 3: <input name="txt3" value="C" type="text"></label>
  <p><input type="submit">
</form>

pas besoin d'ID pour le coup et un échantillon d'<input>.

Maintenant la vérification :

Code:

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
function testFormDatas(form) {
  const datas = new FormData(form);
  const elements = form.querySelectorAll("[name]");
  let nbError = 0;
  elements.forEach((el) => {
    const name = el.name;
    const value = datas.getAll(name).join(",");
    console.log("datas.getAll(%s) :", name, datas.getAll(name));
    if (value) {
      el.parentNode.classList.remove("error");
      console.log("%s is defined to : %s", name, value);
    }
    else {
      el.parentNode.classList.add("error");
      console.log("undefined %s", name);
      nbError += 1;
    }
  });
  return nbError == 0;
}
function checkForm(){
  const oForm = document.getElementById("form");
  const isOK = testFormDatas(oForm)
  return isOK;
}

Regarde plus avant la fonction testFormDatas(form) et voit ce que tu peux en tirer ;)

29/05/2021, 15h40
Cellophile

Citation:

Regarde plus avant la fonction testFormDatas(form) et voit ce que tu peux en tirer ;)

C'est excellent !! Merci pour ta réponse, c'est exactement ce que je cherchais ! Je vais t'embêter avec quelques questions, pour bien comprendre le code :
- à quoi sert le %s ? il est censé renvoyer quelque chose ?
- je ne comprends pas comment fonctionne .join(",") : si je l'enlève, la fonction testFormDatas renvoit true, même si elle devrait renvoyer false. C'est donc indispensable, mais pourquoi ? (je ne vois aucun changement dans les logs)
- je ne vois pas d'erreur s'afficher, pourtant le el.parentNode.classList.add("error"); devrait agir ?
- return nbError == 0; j'adore les codes minimalistes, c'est génial comme c'est simple !
30/05/2021, 07h22
NoSmoking
Citation:

- à quoi sert le %s ? il est censé renvoyer quelque chose ?

il s'agit d'un caractère de substitution permettant le formattage de la sortie.
Plus de détail sur :
- Afficher du texte dans la console
Citation:

- je ne comprends pas comment fonctionne .join(",") : si je l'enlève, la fonction testFormDatas renvoit true, même si elle devrait renvoyer false. C'est donc indispensable, mais pourquoi ? (je ne vois aucun changement dans les logs)

La méthode FormData.getAll retourne un Array, vide si rien de trouvé, donc en joignant on obtient les données concaténées, ou rien. Cela est utile en cas de choix multiple, l’intérêt est de tester non pas la valeur mais son existence.
Plus de détail sur :
- FormData.getAll() ;
- Array.prototype.join()
Citation:

- je ne vois pas d'erreur s'afficher, pourtant le el.parentNode.classList.add("error"); devrait agir ?

L'affectation d'une classe te permet de faire à peut près ce que tu veux via le CSS, et il est vrai que je ne l'ai pas mentionné dans ma réponse.

Ajoute par exemple le CSS suivant à ta page de test
Code:

1 2 3 4 5 6 .error { color: red; } .error:after { content:" Required !"; }
30/05/2021, 10h34
Cellophile

Ok Génial ! Et Merci pour toutes ces réponses !
J'ai encore un problème avec le %s qui n'affiche pas ce qu'il devrait dans la console de codepen, mais je vais chercher de mon côté.

Bonne continuation !
01/06/2021, 07h08
NoSmoking
Citation:

un problème avec le %s qui n'affiche pas ... dans la console de codepen

Je parlais de la console browser et non codepen qui visiblement ne possède pas toutes les fonctionnalités.

Essaie une forme plus « moderne »
Code:

1 2 console.log(`datas.getAll(${name}): ${datas.getAll(name)}`); console.log(`undefined ${name}`);