Discussion :

[Endast]

Bonjour à tous,

Afin de vérifier un formulaire j'ai repris un code JS que j'ai évidemment adapté à mes besoins. Cependant c'est que le formulaire doit aussi modifier son comportement en fonction des choix de l'utilisateur. J'ai donc, afin de modifier ce comportement placer un champ dans une div... Et voilà que la vérification JS du TP ne fonctionne plus, je pense à une erreur au niveau DOM mais après plusieurs tentatives, je suis un peu perdu... Je précise aussi que si on enlève la division, la fonction de vérification fonctionne à nouveau, je vous donne le code qui concerne cette partie :

Code html :

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

1
2
3
4
5
<label class="form_col" for="idispconnect">Code Opérateur d'interconnexion :</label>
<div class="depentporta">
    <input type=text id="idispconnect" name="idispconnect" maxlength="6">
</div>
<span class="tooltip">Vous devez entrer un code opérateur d'interconnexion</span><br /><br /><br />

CSS :

Code css :

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

1
2
3
4
.depentporta {
visibility : hidden;
margin-left : 200px;
}

JS de vérification pour ce champ :

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
check['idispconnect'] = function() {
    var porta = document.getElementById('porta'),
        idispconnect = document.getElementById('idispconnect'),
        depentporta = document.getElementById('depentporta'),
        tooltipStyle = getTooltip(depentporta.childNodes).style;
    if (idispconnect == undefined){
        idispconnect.className = 'correct';
        tooltipStyle.display = 'none';
        return true;
    } else if (porta.options[porta.selectedIndex] == undefined) {
        idispconnect.className = 'correct';
        tooltipStyle.display = 'none';
        return true;  
    } else if (idispconnect.value == "" && porta.options[porta.selectedIndex].value == "PORTA") {
        idispconnect.className = 'incorrect';
        tooltipStyle.display = 'inline-block';
        return false;
    } else {
        idispconnect.className = 'correct';
        tooltipStyle.display = 'none';
        return true;
    }
};

Pour faire court, ce champ s'affiche quand une condition est remplie (dans le JS, mais qui n'est pas présent dans ce post), et cela fonctionne. C'est seulement la fonction de vérification derrière qui ne fonctionne pas... Si vous avez une idée je suis preneur.

Merci d'avance =)

[Bovino]

Code html :

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

<div class="depentporta">

Code :

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

depentporta = document.getElementById('depentporta')

Tu saurais traduire "get element by id" en français (indice : surtout la partie en gras) ?

[Endast]

Effectivement je cours me cacher... Bon au moins celle là je ne la referai plus...

Cependant, cela ne fonctionne toujours pas en changeant class par id... j'ai évidemment viré les autres div portant le même id pour le moment, aussi j'ai pensé à une solution plus simple au niveau des variables, mais ça ne fonctionne toujours pas :

Code :

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

1
2
3
var porta = document.getElementById('porta'),
    idispconnect = document.getElementById('idispconnect'),
    tooltipStyle = getTooltip(idispconnect).style;

[Bovino]

Code :

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

tooltipStyle = getTooltip(idispconnect).style;

Il faudrait déjà savoir ce que retourne la fonction getTooltip().

Sinon, il reste des incohérences dans ton code...

Code :

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

1
2
3
4
5
if (idispconnect == undefined){
 idispconnect.className = 'correct';
 tooltipStyle.display = 'none';
 return true;
}

Si la variable vaut undefined, tu ne peux pas lui affecter de classe ni de style !

[Endast]

Oui, je m'en suis rendu compte alors que je venais de me relire, alors la fonction getTooltip est la suivante :

Code :

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

1
2
3
4
5
6
7
8
 function getTooltip(element) {
    while (element = element.nextSibling) {
        if (element.className === 'tooltip') {
            return element;
        }
    }
    return false;
}