Discussion :

[Elztx]

Bonjour à tous,
Je vous explique mon petit souci du jour !
J'ai un formulaire associé à un script. Lorsque je clique sur le bouton "réserver"; un encart avec signature apparait et mes champs "nom" et "prenom" disparaissent.
Mes champs "Nom" et "Prenom" sont en required pour ne pas pouvoir avancer sans..Sauf que le script bloque la notion d'obligation avant le passage à l'étape signature.

Je ne sais pas si c'est très clair.. je vais illustrer. Je peux montrer mon code si nécessaire.

Du coup je connais pas très bien JS mais j'aimerai ajouter dans mon script quelque chose qui ajouterait une condition (&) pour passer à l'étape signature genre "& si les champs "nom" et "prenom" contiennent plus de 2 caractères chacun", mais je ne sais pas trop si c'est faisable comme ça

Mon formulaire de base :


Après clic sur le bouton :


(Si je clique sur "Annuler", ils me disent bien que le champs est obligatoire mais ce n'est pas bloquant du coup)


Merci

[Invité]

Bonjour,

...Je peux montrer mon code si nécessaire...

Non... tu crois... ?

[Elztx]

Hum, en réalité j'ai ajouté cette phrase car je demande simplement s'il est possible d'imposer une condition traitant du nombre de caractères dans le champ, si en pratique cela est possible. Il n'est donc pas forcément nécessaire que je montre mon code, en fait... !

Mais bon... donc , voilà mon code :

Le

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
<div id="formulaire">
                <form>
                    <div id="divnom">        
                        <label for="name">Nom :</label>
                        <input type="text" id="nom" name="user_name" required>
                    </div>
                    <div id="divprenom">
                        <label for="name">Prénom :</label>
                        <input type="name" id="prenom" name="user_prenom" required>
                    </div>
                    <button type="submit" id="reserver">Réserver</button>
                    <p id="legendeformulaire">Vos informations personnelles  ne seront pas conservées dans notre base de données.</p>
                </form>
                <div id="canvas"> 
                    <p id="legcanvas">Signez dans le cadre prévu à cet effet </p>
                    <div id="enattendantlecanvas"></div>
                    <input type="button" id="validerresa" value="Valider la réservation"> 
                    <p id="legendeformulaire">
                </div>
            </div>

Le

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.getElementById("reserver").onclick = function() {
    if (window.getComputedStyle(document.getElementById("canvas")).display=='none') {
            document.getElementById("canvas").style.display="block";
            document.getElementById("reserver").innerHTML = "Annuler";
            document.getElementById("map").style.height = '723px'; 
            document.getElementById("divnom").style.display="none";
            document.getElementById("divprenom").style.display="none";
        } 
    else { 
        document.getElementById("canvas").style.display="none";
        document.getElementById("reserver").innerHTML = "Réserver";
        document.getElementById("map").style.height = '491px'; 
        document.getElementById("divnom").style.display="block";
        document.getElementById("divprenom").style.display="block";
    }
}

Et le

Code CSS :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
#nom, #prenom {
    width : 100px;
    margin: 10px;
}
 
#nom {
    margin-left: 25px;
}
 
form {
    padding: 15px;
}
 
#formulaire{
    text-align: center;
    background-color: floralwhite;
 
}
 
#reserver, #resa{
    margin : auto;
    margin-top : 15px;
    width : 105px;
    height: 25px;
    border: 2px solid #d20025;
    background-color: #d20025;
    border-radius: 5px;
    display: block;
    font-size : 15px;
    font-weight: 700;
    color: azure
}
 
#legendeformulaire {
    margin-top: 20px;
    font-size: 9px;
}
 
#canvas{
    background-color: lightslategray;
    margin: auto;
    display: none;
    padding: 10px;
    height : 232px;
}
 
#legcanvas{
    color: azure;
}
 
#validerresa{
    margin : auto;
    margin-top : 15px;
    width : 157px;
    height: 30px;
    border: 2px solid #d20025;
    background-color: #d20025;
    border-radius: 5px;
    display: block;
    font-size : 14px;
    font-weight: 500;
    text-align: center;
    color: floralwhite;
}
 
#enattendantlecanvas{
    margin: auto;
    height: 120px;
    background-color: white;
    border-radius: 25px;
}

J'ai essayé d'ajouter une condition comme && document.getElementById('nom').length > 3 mais ça ne fonctionne pas

[Invité]

Bonjour,

Quand on dit "montrer le code", il s'agit du code nécessaire et suffisant pour comprendre/reproduire le problème.

Là, tu en montres trop, mais surtout PAS ce qu'il faut.

...
J'ai essayé d'ajouter une condition comme

Code :

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

&& document.getElementById('nom').length > 3

mais ça ne fonctionne pas

Si tu ne MONTRES pas COMMENT tu as fait (le code !), on ne peut pas t'expliquer POURQUOI "ça ne fonctionne pas".



N.B. Et s'il ne s'agit QUE de ça (tester la longueur d'une valeur), ce n'était pas la peine de "noyer le poisson" dans ton 1er message...

[Elztx]

D'une j'ai édité mon message pour ajouter mon dernier paragraphe donc j'allais pas tout modifier alors que je montre d'abord ma base de code et ensuite ce que j'ai pu tenter d'ajouter alors que je ne connais pas le procédé pour arriver à mes fins (c'est un peu l'objet même de ma question). (De plus il ne s'agit pas d'un problème à comprendre ou à reproduire...)

De deux je montre la structure de ce que j'ai essayé donc je demande s'il y a par exemple un pb de syntaxe ou si je n'emprunte pas la bonne voie.

De trois je ne vois pas en quoi j'ai noyé le poisson alors que j'ai écrit

"j'aimerai ajouter dans mon script quelque chose qui ajouterait une condition (&) pour passer à l'étape signature genre "& si les champs "nom" et "prenom" contiennent plus de 2 caractères chacun""

Donc merci pour tes commentaires mais ils ne répondent en rien à ma question de base à savoir "Est-il possible d'ajouter une condition concernant le nombre de caractères dans un champ, et si oui comment ?". Merci bien !

[Invité]

Réponse courte :

1- oui

2- document.getElementById('....').value.length.


N.B. Pour info, on peut déboguer soi-même son code.

• soit en mettant une alert(...);,
• soit en l'affichant dans la console du navigateur * : console.log(...);.

Ca permet de voir ce qui se passe, et ce que contiennent les variables et autres données.


* (touche "F12" -> "Inspecteur")

[Elztx]

Merci bien, la structure fonctionne bien !!
A présent, j'aimerai additionner des conditions qui lancent une fonction d'alerte, seulement je ne parviens pas à mettre les deux conditions avec && (EDIT, du coup pas && mais || ), j'ai essayé de me documenter mais je n'ai pas trouvé..

Voici ce que j'ai tenté :

Code :

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

1
2
3
4
5
6
7
function alerte() {alert("Veuillez remplir tous les champs")};
 
document.getElementById("validerresa").onclick = function () {
    if (document.getElementById('nom').value.length < 2) &&(document.getElementById('prenom').value.length < 2) {
        alerte()
    }
};

[ProgElecT]

Salut

Code :

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

if (document.getElementById('nom').value.length < 2  && document.getElementById('prenom').value.length < 2) {

[Elztx]

Merci beaucoup ProgElecT, je me heurtais en effet à une erreur de syntaxe !

Sujet !!

[Invité]

De RIEN ............................

[Elztx]

Je t'ai remercié dans mon message précédent :

Merci bien, la structure fonctionne bien !!

Bonne journée à tous les deux

[Invité]

Il faut bien que je justifie mon "rôle de méchant"...