Div dans un form

[ludojojo]

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

[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

[OnaStick]

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

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 !

[ludojojo]

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

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

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.

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...
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 ?

[OnaStick]

Essaye avec ceci :

Code javascript :

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

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

[MonsieurSmith]

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

Code :

document.getElementById(fils[i].id)

à la place de

Code :

fils[i]

?

[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...

[ludojojo]

Toujours le même résultat...

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