Div dans un form

Version imprimable

Div dans un form

Bonjour,

Je cherche à connaitre l'attirbut style.display de tous les éléments div class="error" présents dans un "form".

Exemple :
HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form id="DeleteRecordForm">
    <fieldset id="DeleteRecordFieldset">
        <legend>Delete a record</legend>
        <div class="label"> Table : <i>*</i></div><div class="input"><input id="table" onblur="ValidateData(this.id)" /></div><div id="table_error" class="error">Champ obligatoire</div>
        <br />
        <div class="label"> Champ : <i>*</i></div><div class="input"><input id="field" onblur="ValidateData(this.id)" /></div><div id="field_error" class="error">Champ obligatoire</div>
        <br />
        <div class="label"> Login : <i>*</i></div><div class="input"><input id="login" onblur="ValidateData(this.id)" /></div><div id="login_error" class="error">Champ obligatoire</div>
        <br />
        <input id="DeleteRecord" type="button" value="Submit" onclick="SubmitVerification(this.id)" />
    </fieldset>
</form>

Dans mon css je met toutes les div de class "error" avec un display = none;Voici la fonction JS que j'ai commencé à faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
function SubmitVerification(id)
{
    var elm = document.getElementById(id + 'Form').elements;
    for(var i=1; i<elm.lenght;i++)
    {
        if(elm[i].display.type == "inline-block")
            alert("error");
        else
            alert('OK pour envoi');
    }
}

Bien sur cette fonction ne marche pas. Rien ne se passe.
Si quelqu'un à une idée...

26/08/2011, 14h20
MonsieurSmith

Bonjour,

Ta fonction JS comporte quelques erreurs :
- À la ligne 4 : "lenght" n'est pas une propriété valide... "length", si !
- À la ligne 6 : l'appel correct du style de "display" sur ton élément ne s'écrit pas

Code:

elm[i].display.type

mais

Code:

elm[i].style.display

Bonjour,

Pourquoi n'utiliserais-tu pas le DOM, en bouclant sur les éléments de formulaire, jusqu'a trouver un div et verifier si ca class est "error" ou non ? Quelque chose comme !
Code:

1 2 3 4 5 6 7 8 9 10 var parentNode = "DeleteRecordFieldset"; var noeud = document.getElementById(parentNode); var fils = noeud.childNodes; for(var i = 0; i < fils.length; i++){ if(fils[i].nodeType==1 && fils[i].className == 'error'){ //Action si error class ) else { // Action pas error classe }
Ceci etant dit je ne sais pas si on peut boucler sur un Fieldset, à essayer !

Citation:

Envoyé par MonsieurSmith

Bonjour,

Ta fonction JS comporte quelques erreurs :
- À la ligne 4 : "lenght" n'est pas une propriété valide... "length", si !
- À la ligne 6 : l'appel correct du style de "display" sur ton élément ne s'écrit pas

Code:

elm[i].display.type

mais

Code:

elm[i].style.display

:boulet: En effet, je l'ai fait un peut trop rapidement... Cela dit, ça ne règle pas mon problème...

Citation:

Envoyé par OnaStick

Pourquoi n'utiliserais-tu pas le DOM, en bouclant sur les éléments de formulaire, jusqu'a trouver un div et verifier si ca class est "error" ou non ?

Par ce que je ne connaissait pas cette fonction. :oops:

Citation:

Envoyé par OnaStick

Ceci etant dit je ne sais pas si on peut boucler sur un Fieldset, à essayer !

Oui oui on peut, cela fonctionne !

En revanche, je n'arrive pas à récupérer l'information concernant le display... :aie:
J'ai mis ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function SubmitVerification(id) { alert('submit'); var parentNode = id + 'Fieldset'; var noeud = document.getElementById(parentNode); var fils = noeud.childNodes; for(var i = 0; i < fils.length; i++){ if(fils[i].nodeType==1 && fils[i].className == 'error') { alert(fils[i].style.display) } } }
J'ai un message box vide pour chacune de mes div...
En revanche si je met dans le html le code suivant :

Code:

<div id="table_error" class="error" style="display:none">

Alors le script m'affiche bien le none...
Une idée pour que je puisse éviter de mettre le css dans le code html ?

Essaye avec ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function SubmitVerification(id)
{
	alert('submit');
	var parentNode = id + 'Fieldset';
	var noeud = document.getElementById(parentNode);
	var fils = noeud.childNodes;
	for(var i = 0; i < fils.length; i++){
		if(fils[i].nodeType==1 && fils[i].className == 'error')
		{
			alert(document.getElementById(fils[i].id).style.display);
		} 
	}
}

Et pour faire propre, tu peux faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function SubmitVerification(id)
{
	alert('submit');
	var parentNode = id + 'Fieldset';
	var noeud = document.getElementById(parentNode);
	var fils = noeud.childNodes;
	for(var i = 0; i < fils.length; i++){
		if(fils[i].nodeType==1 && fils[i].className == 'error')
		{
			elem = document.getElementById(fils[i].id);
                        alert(elem.style.dysplay);
		} 
	}
}

26/08/2011, 15h01
MonsieurSmith

?? Quel est l'intérêt de

Code:

document.getElementById(fils[i].id)

à la place de

Code:

fils[i]

? 8O
26/08/2011, 15h04
OnaStick

Ca, il faut demander au developpeur de navigateur, j'ai remarqué que suivant la syntaxe utilisé, certains code pouvait ne pas fonctionner sur certains navigateur.

Après hein...
26/08/2011, 15h10
ludojojo

Toujours le même résultat... :triste:

EDIT : Fonctionne sous FF 6.0, pas sous IE 7/8/9 ni sous Chrome... :arf: