IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

javascript et formulaire


Sujet :

JavaScript

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de slack457
    Homme Profil pro
    Inscrit en
    Juillet 2009
    Messages
    126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 126
    Par défaut javascript et formulaire
    Bonjour à tous,

    j'ai un formulaire "géré" par un petit script (JavaScript),
    le script fonctionne bien quand j'utilise un formulaire (HTML) en "liste", et ne marche plus quand j'utilise un formulaire en "tableau"...

    code HTML avec lequel le script fonctionne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <ul>
    	<li>
    		<label for="email"> email :</label>
    		<input id="email" name="email" type="email" size="30" />
    		<span class="tooltip"> rentrez une adresse valide </span>
    	</li>
    	<li>
    		<label for="password"> pass : </label></td>
    		<input id="password" name="password" type="password" size="30" />
    		<span class="tooltip"> au moins 4 caractères </span>
    	</li>
    </ul>

    code HTML avec lequel le script NE fonctionne PAS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <table>
    	<tr>
    		<td><label for="email"> email :</label></td>
    		<td><input id="email" name="email" type="email" size="30" /></td>
    		<td><span class="tooltip"> rentrez une adresse valide </span></td>
    	</tr>
    	<tr>
    		<td><label for="password"> pass : </label></td>
    		<td><input id="password" name="password" type="password" size="30"  /></td>
    		<td><span class="tooltip"> au moins 4 caractères </span></td>
    	</tr>
    </table>

    Et voici le script JavaScript :

    PS : Il est un peu long, et ce n'est peut être pas évident de "voir" mon problème, alors je vais aussi mettre les fichiers en pièces jointe pour que vous puissiez tester directement et visualiser le problème plus facilement

    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
    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
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
     
    var check_onkeyup = {};
    var check_onblur = {};
     
    var checked = {};
    checked['email'] = false;
    checked['password'] = false;
     
    var button_enregistrer = document.getElementById('button_enregistrer');
    button_enregistrer.disabled = 'disabled';
     
    // retourne le "tooltip" le plus proche de l'élément <input> utlisé
    function getTooltip(element) {
    	while (element = element.nextSibling) {
    		if (element.className === 'tooltip') {
    			return element;
    		}
    	}
    	return false;
    }
     
    check_onkeyup['email'] = function () {
    	var email = document.getElementById('email'),
    		tooltipStyle = getTooltip(email).style;
     
    	if (email.value.length > 0) {
    		if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(email.value)) {
    			email.className = 'correct';
    			tooltipStyle.display = 'none';
    			checked['email'] = true;
    		} else {
    			email.className = 'in_progress';
    			tooltipStyle.display = 'inline-block';
    			checked['email'] = false;
    		}
    	}
    }
     
    check_onblur['email'] = function () {
    	var email = document.getElementById('email'),
    		tooltipStyle = getTooltip(email).style;
     
    	if (email.value.length == 0) {
    		email.className = 'none';
    		tooltipStyle.display = 'inline-block';
    		checked['email'] = false;
    	} else if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(email.value)) {
    		email.className = 'correct';
    		tooltipStyle.display = 'none';
    		checked['email'] = true;
    	} else {
    		email.className = 'incorrect';
    		tooltipStyle.display = 'inline-block';
    		checked['email'] = false;
    	}
    }
     
    check_onkeyup['password'] = function () {
    	var password = document.getElementById('password'),
    		tooltipStyle = getTooltip(password).style;
     
    	if (password.value.length > 0) {
    		if (password.value.length >= 4) {
    			password.className = 'correct';
    			tooltipStyle.display = 'none';
    			checked['password'] = true;
    		} else {
    			password.className = 'in_progress';
    			tooltipStyle.display = 'inline-block';
    			checked['password'] = false;
    		}
    	}
    }
     
    check_onblur['password'] = function () {
    	var password = document.getElementById('password'),
    		tooltipStyle = getTooltip(password).style;
     
    	if (password.value.length == 0) {
    		password.className = 'none';
    		tooltipStyle.display = 'inline-block';
    		checked['password'] = false;
    	} else if (password.value.length < 4) {
    		password.className = 'incorrect';
    		tooltipStyle.display = 'inline-block';
    		checked['password'] = false;
    	} else {
    		password.className = 'correct';
    		tooltipStyle.display = 'none';
    		checked['password'] = true;
    	}
    }
     
    function check_2() {
    	var count = 0;
    	var button_enregistrer = document.getElementById('button_enregistrer');
     
    	for (var i in checked) {
    		if (checked[i] == true) {
    			count++;
    		}
    		else {
    			count--; 
    		}
    	}
     
    	if (count == 2) {
    		button_enregistrer.disabled = '';
    	}
    	else {
    		button_enregistrer.disabled = 'disabled';
    	}
    }
     
     
     
     
     
    var inputs = document.getElementsByTagName('input'),
    	inputsLength = inputs.length;
     
    for (var i = 0 ; i < inputsLength ; i++) {
    	inputs[i].onkeyup = function() {
    		check_onkeyup[this.id](this.id);
    		check_2();
    	};
     
    	inputs[i].onblur = function() {
    		check_onblur[this.id](this.id);
    		check_2();
    	};
    }

    Remarque :
    Il me semble que mon problème vient de ma fonction qui est sensé retourner le plus proche "tooltip", parceque dans le code HTML en "liste" le tooltip est DIRECTEMENT après le <input>, alors que dans le code HTML en "tableau" il est plus éloigné.
    Pourtant, je ne vois pas où pourrait être mon erreur dans la fonction...
    je parle de cette fonction dans le script JavaScript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // retourne le "tooltip" le plus proche de l'élément <input> utlisé
    function getTooltip(element) {
    	while (element = element.nextSibling) {
    		if (element.className === 'tooltip') {
    			return element;
    		}
    	}
    	return false;
    }
    Pour "tester" mon problème, il suffit de copier/coller le code en commentaire (soit le code en "liste" soit le code en "tableau") écrits en commentaire dans "index.php"
    Fichiers attachés Fichiers attachés

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Ajax, formulaire, div et select
    Par n8ken dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 23/09/2006, 10h51
  2. javascript et formulaire
    Par djedje37et28 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 10/08/2006, 14h53
  3. [Javascript] Controle Formulaire
    Par Cch95 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 26/06/2006, 14h32
  4. [Javascript] Validation formulaire avec ENTREE
    Par titalex dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 14/06/2006, 16h37
  5. javascript et formulaire
    Par jfjava2002 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/03/2006, 11h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo