Modifier un feuille de style avec du javascript

bonjour tout le monde,

voila j'ai un formulaire avec un script en JS pour verifier les differentes saisie, jusque la pas de probleme, mon script fais une analyse champs par champs ce qui fait qu'a la premiere erreur qu'il trouve il affiche une alert() et ainsi de suite jusqu'a ce qu'il n'y ai plus d'erreur. (un script tout a fait banal)
je voudrais l'amelirorer pour qu'il me prenne en compte toutes les erreurs d'un coup et qu'ensuite il m'affiche un petit lablel et les champs en cause en rouge.
J'arrive a récuperer les erreur dans un tableau mais la ou je bloque c'est pour lodifie le comportement des champs pour que le fond soit rouge (je crois qu'il faut agir directement sur la feuille de style)
si quelqu'un pouvait juste m'expliquer comment on peut le faire (juste la methode)


merci d'avance

je marche a taton pour mon script et pour le moment je commence comme ca:

//javascript document
function validation {
	var erreur = new array();//tableau qui récupere les erreurs de saisie du formulaire
	var i = 0;
	var email = document.getElementById("eMail").value;
	var statut = true;
	
	if (document.getElementById("nomSociete").value == "" {
		erreur[i] = document.getElementById("nomSociete")
		i+=1
                statut = false;

		}
	if (document.getElementByID("nomContact").value =="" {
		erreur[i] = document.getElementById("nomContact")
		i+=1
                statut = false;
		}
		
        if statut == false {
	for j=0 to j=i {
		erreur[j].sytle = "backgroung-color = red "
		}
}

[/i][/i]

mais vous vous en douterez ca ne marche pas
Modifié par bedomon (07 Feb 2006 - 11:07)

Salut,

Déjà petit problème de faute de frappe dans ton code "sytle"
De plus, pour modifier un attribut CSS en javascript il faut écrire ce même attribut tout attaché et avec des capitales aux mots suivant le premier exemple :

document.getElementById("monId").style.backgroundColor = "red";

bon je ne comprend pa il ne veu po me prendre en compte le return

function validation {
	var erreur = new array();//tableau qui récupere les erreurs de saisie du formulaire
	var i = 0;
	var email = document.getElementById("eMail").value;
	var statut = true;
	if (document.getElementById("nomSociete").value == "" ){
		erreur.push(document.getElementById("nomSociete"));
		statut = false;
	}
	if (statut == false) {
		for(i=0; i<erreur.length; i++){
			erreur[j].style.backgroundColor = "red";
		}
		return false;
	}else{
		return true;}
}

la var email c pour qu'il y a un if qui l'utilise mais je l'ai enlevé pour raccourcir le code

ya quelque chose qui cloche ds le code???
Modifié par bedomon (07 Feb 2006 - 15:00)

bon bon bon j'ai fai des changement et je me suis séparé de la boucle for

bon maintenant la pb est different j'arrive a obtenir une coloration des champs ou il y a une erreur mais il passe quand meme a la page suivante (votre demande est prise en compte)
en fait j'ai enlever de chaque bloc if le return = false et j'ai mis a la place un boleen et a la fin si le booleen est a false return est aussi a false, et bien c'est ca qu'il ne me prend pas en compte.....
voila la nouveau script

function validation()  
{
 var erreur = new Array();
 var statut = true;
        var email = document.getElementById("eMail").value;  
        if (email.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1)
        {  
    erreur.push(document.getElementById("eMail"));
            document.getElementById("eMail").focus();
    document.getElementById("eMail").style.backgroundColor = "#fd8b8b";
    statut = false;
        }  
        if(document.getElementById("nomSociete").value == "")  
  {
   erreur.push(document.getElementById("nomSociete"));
        document.getElementById("nomSociete").focus();
    document.getElementById("nomSociete").style.backgroundColor = "#fd8b8b";
        statut = false;  
     }
  if(document.getElementById("nomContact").value == "")  
  {  
   erreur.push(document.getElementById("nomContact"));
        document.getElementById("nomContact").focus();  
    document.getElementById("nomContact").style.backgroundColor = "#fd8b8b";
        statut = false;  
     }
  if(document.getElementById("adresseSociete").value == "")  
  {
   erreur.push(document.getElementById("adresseSociete"));
        document.getElementById("adresseSociete").focus();  
        document.getElementById("adresseSociete").style.backgroundColor = "#fd8b8b";
    statut = false;  
     }  
  if(document.getElementById("commentaire").value == "")  
  {  
   erreur.push(document.getElementById("commentaire"));
         document.getElementById("commentaire").focus();  
   document.getElementById("commentaire").style.backgroundColor = "#fd8b8b";
         statut = false;  
     }
  if(document.getElementById("tel").value =="")
  {
   erreur.push(document.getElementById("tel"));
   document.getElementById("tel").focus();
   document.getElementById("tel").style.backgroundColor = "#fd8b8b";
   statut = false;
  }
  if (statut = false) {
   return false;
  }
}

je vois bien que le probleme vient du return mais je n'arrive pas a comprendre pourquoi il se comporte de cette maniere et comment y remedier....

1) pour les tests c'est == et non =
2) un simple "return statut;" suffit.

Je pense que ton problème est plutôt sur l'appelle de la fonction. Fais une recherche dans le forum sur onsubmit, tu devrais trouver ton bonheur.

l'appel de la fonctin fonctionne tres bien puisque j'en ai fait une premier avec des alert() et ca marchais nikel

et euh mes test sont bien avec == il y a juste les lignes

document.getElementById("commentaire").style.backgroundColor = "#fd8b8b";

qui ont une seul =
Modifié par bedomon (08 Feb 2006 - 10:35)

J'interviens un peu tard dans la bataille, mais est-ce qu'il ne serait pas plus simple de définir une classe CSS "erreur" (par exemple), et de l'ajouter via javascript aux éléments concernés ?

De plus, si le formulaire est également vérifié côté serveur (et il devrait l'être), on peut faire la même manip sur le serveur et renvoyer la page avec les champs erronés en rouge aussi.

c'est bon le probleme est resolu, je n'avais pas vu ton post Lanza mais ce que tu propose correspond a ce que j'ai fait