danielhagnoul

Suite de Form 1 : rappel des billets et fonctions existantes. Introduction du sujet.

Pour créer un objet DOM à partir d'un FORM, en utilisant la valeur des attributs name pour nommer les propriétés de l'objet, il faut maîtriser l'unicité des noms.

Code JavaScript :

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

1
2
3
4
5
kFormNameUnique(elemForm = kRequiredParamVerbose({
  param: "elemForm",
  type: "htmlFormElement",
  info: "un élément Form"
}))

Cette fonction assure cette unicité en tenant compte du problème posé par les boutons radio et les checkbox.

Pour un ensemble de boutons radio, on ne prend en compte qu'une seule fois la valeur de l'attribut name. Mais pour chaque bouton radio on prend en compte la valeur de l'attribut data-name si cet attribut existe.

Pour les éléments checkbox on prend en compte tous les attributs name sauf si le nom est de la forme "nom[]". Dans ce cas on ne prend en compte qu'une seule fois la valeur de l'attribut name et pour chaque checkbox on cherche la valeur de l'attribut data-name si cet attribut existe.

La fonction vérifie l'unicité de chaque nom (name et data-name).

Exemple n° 1 :

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
<form id="myForm">
    <fieldset>
        <legend>Choisir un pays</legend>
        <label>France
            <input type="radio" name="pays" data-name="france" value="France">
        </label>
        <br>
        <label>Belgique
            <input type="radio" name="pays" data-name="belgique" value="Belgique">
        </label>
        <br>
        <label>Espagne
            <input type="radio" name="pays" data-name="espagne" value="Espagne">
        </label>
        <br>
        <label>France
            <input type="radio" name="pays" data-name="france" value="France">
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="reset">Réinitialiser</button>
</form>

Comme le FORM est simpliste, on voit de suite que l'on propose deux fois la France au choix de l'utilisateur.

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
    dvjhUtilitiesBoolDebug = true;
 
    const elemForm = k$('#myForm');
 
    if (kFormNameUnique(elemForm)) {
 
    }
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : pays, france, belgique, espagne, france, submit, reset

dvjhUtilities-1.8.0.js:571 Uncaught Error: kFormNameUnique : l'attribut name ou data-name france existe en au moins deux exemplaires dans votre formulaire

at kFormNameUnique (dvjhUtilities-1.8.0.js:571)

at window.addEventListener.ev (test.js:27)

Notez bien que le doublon est la valeur du data-name pas celle du name qui est "pays" pour tous les éléments radio.

formTest1

Si vous aviez écrit France au lieu de france dans le second cas, exemple n° 2

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
<form id="myForm">
    <fieldset>
        <legend>Choisir un pays</legend>
        <label>France
            <input type="radio" name="pays" data-name="france" value="France">
        </label>
        <br>
        <label>Belgique
            <input type="radio" name="pays" data-name="belgique" value="Belgique">
        </label>
        <br>
        <label>Espagne
            <input type="radio" name="pays" data-name="espagne" value="Espagne">
        </label>
        <br>
        <label>France
            <input type="radio" name="pays" data-name="France" value="France">
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="reset">Réinitialiser</button>
</form>

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : pays, france, belgique, espagne, France, submit, reset

La fonction retourne true car l'unicité des noms est préservée.

Cette fonction ne peut rien faire contre un formulaire bancal s'il respecte l'unicité des noms.

formTest2

Exemple n° 3

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
<form id="myForm">
    <fieldset>
        <legend>Choisir des pays</legend>
        <label>France
            <input type="checkbox" name="pays[]" data-name="france" value="France">
        </label>
        <br>
        <label>Belgique
            <input type="checkbox" name="pays[]" data-name="belgique" value="Belgique">
        </label>
        <br>
        <label>Espagne
            <input type="checkbox" name="pays[]" data-name="espagne" value="Espagne">
        </label>
        <br>
    </fieldset>
    <fieldset>
        <legend>Goumandises</legend>
        <label>Chocolat
            <input type="checkbox" name="chocolat" value="Chocolat">
        </label>
        <br>
        <label>Nouget
            <input type="checkbox" name="nougat" value="Nougat">
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="reset">Réinitialiser</button>
</form>

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : pays[], france, belgique, espagne, chocolat, nougat, submit, reset

La fonction retourne true.

Rappelez vous qu'un ensemble de checkbox peuvent avoir le même attribut name, s'il est écrit, exclusivement, sous la forme nom[] (pas d'indice, sinon chaque nom est différent).

Ne donner pas un attribut data-name au éléments portant un name valide.

formTest3

Exemple n° 4 :

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
<form id="myForm">
    <fieldset>
        <legend>Choisir des pays</legend>
        <label>France
            <input type="checkbox" name="pays[]" data-name="france" value="France">
        </label>
        <br>
        <label>Belgique
            <input type="checkbox" name="pays[]" data-name="belgique" value="Belgique">
        </label>
        <br>
        <label>Espagne
            <input type="checkbox" name="pays[]" data-name="espagne" value="Espagne">
        </label>
        <br>
    </fieldset>
    <fieldset>
        <legend>Goumandises</legend>
        <label>Chocolat
            <input type="checkbox" name="chocolat" data-name="chocolatNoir" value="Chocolat">
        </label>
        <br>
        <label>Nouget
            <input type="checkbox" name="nougat" data-name="nougatSucre" value="Nougat">
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="reset">Réinitialiser</button>
</form>

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : pays[], france, belgique, espagne, chocolat, chocolatNoir, nougat, nougatSucre, submit, reset

La fonction retourne true.

Les éléments data-name "chocolatNoir" et "nougatSucre" sont uniques, mais inutiles. La fonction kCreateFormDOMObject créera des propriétés d'objet redondantes agissant sur le même élément du DOM.

Plusieurs éléments de formulaire (label, fieldset, legend, etc) ne recevoivent normalement pas un attribut name, de même plusieurs éléments pouvant figurer dans un formulaire (meter, progress, etc) ne peuvent pas recevoir un attribut name. Si vous devez pouvoir agir sur ces éléments, n'hésitez pas à leur donner un data-name.

formTest4

Exemple n° 5 :

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
33
<form id="myForm">
    <fieldset>
        <legend>Un peu de tout</legend>
        <label>Nom
            <input type="text" name="nom" value="">
        </label>
        <br>
        <div data-name="divAdresse">
            <label>Rue
                <input type="text" name="rue" value="">
            </label>
            <br>
            <label>Ville
                <input type="text" name="ville" value="">
            </label>
            <br>
        </div>
    </fieldset>
    <fieldset>
        <legend>Pourquoi pas</legend>
        <label>Note du chocolat noir (de 1 à 10) :
            <progress data-name="noteChocolatNoir" min="1" max="10" step="1" value="5"></progress>
        </label>
        <br>
        <label>Consommation de Nougat (en %) :
            <meter data-name="consommationNouget" min="0" max="100" step="1" value="10"></meter>
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="reset">Réinitialiser</button>
</form>

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : nom, divAdresse, rue, ville, noteChocolatNoir, consommationNouget, submit, reset

La fonction retourne true.

formTest5

Licence Creative Commons Attribution 2.0 Belgique