Script bloquant formulaire

Version imprimable

19/04/2019, 16h20
Elztx

3 pièce(s) jointe(s)

Script bloquant formulaire

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 :question:

Mon formulaire de base :
Pièce jointe 468492

Après clic sur le bouton :
Pièce jointe 468493

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

Merci :)
19/04/2019, 17h34
Invité

Bonjour,

Citation:

Envoyé par Elztx

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

Non... tu crois... ? :aie:

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... ! :roll:

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

Le

Code:

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>

Code:

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:

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

23/04/2019, 10h40
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.

Citation:

Envoyé par Elztx

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

Code:

&& 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...
23/04/2019, 10h58
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

Citation:

"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""

:roll:

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 !
23/04/2019, 11h13
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")

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:

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() } };

23/04/2019, 12h55
ProgElecT

Salut

Code:

if (document.getElementById('nom').value.length < 2 && document.getElementById('prenom').value.length < 2) {
23/04/2019, 14h30
Elztx

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

Sujet :resolu: !!
23/04/2019, 15h04
Invité

De RIEN ............................ :roll:
23/04/2019, 15h10
Elztx

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

Citation:

Merci bien, la structure fonctionne bien !!

;)

Bonne journée à tous les deux :D
23/04/2019, 15h42
Invité

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