Bonjour,

Je souhaite faire une vérification de mon formulaire en JS pour signaler les champs mal rempli avant l'envoie du formulaire (une vérification est faite en PHP ensuite). Voici mon formulaire:

<form id="monFormulaire" method="post">
	<fieldset>
		<legend>Vos coordonnées</legend>
			<p> <label for="nom">Votre NOM <span class="etoile">*</span></label> : <input type="text" name="nom" id="nom" tabindex="10" value="<?php echo ''.$nom.'' ?>"/> </p>
			<p> <label for="prenom">Votre Prénom <span class="etoile">*</span></label> : <input type="text" name="prenom" id="prenom" tabindex="20" value="<?php echo ''.$prenom.'' ?>"/></p>
			<p> <label for="pseudo">Votre pseudo (entre 4 et 20 caratères)<span class="etoile">*</span></label> : <input type="text" name="pseudo" id="pseudo" tabindex="30" value="<?php echo ''.$pseudo.'' ?>" onchange="verifPseudo(this)"/> </p>
			<p> <label for="mot_de_passe">Votre mot de passe (6 caratères minimum) <span class="etoile">*</span></label> : <input type="password" name="mot_de_passe" id="mot_de_passe" tabindex="40" onchange="verifPasse(this)"/> </p>
			<p> <label for="confirm_mot_de_passe">Confirmer votre mot de passe <span class="etoile">*</span></label> : <input type="password" name="confirm_mot_de_passe" id="confirm_mot_de_passe" tabindex="50" onchange="verifConfirmpasse(this)" /> </p>
			<p> <label for="email">Votre adresse e-mail <span class="etoile">*</span></label> : <input type="text" name="email" id="email" tabindex="60" value="<?php echo ''.$email.'' ?>" onchange="verifMail(this)""/> </p>
			<p> <label for="adresse">Votre adresse <span class="etoile">*</span></label> : <input type="text" name="adresse" id="adresse" tabindex="62" value="<?php echo ''.$adresse.'' ?>"/> </p>
		        <p> <label for="cp">Votre code postal (exemple: 53500)<span class="etoile">*</span></label> : <input type="text" name="cp" id="cp" tabindex="64" value="<?php echo ''.$cp.'' ?>" onchange="verifCp(this)"/> </p>
			<p> <label for="ville">Votre ville <span class="etoile">*</span></label> : <input type="text" name="ville" id="ville" tabindex="66" value="<?php echo ''.$ville.'' ?>"/> </p>
			<p> <label for="telephone">Votre numéro de téléphone <span class="etoile">*</span></label> : <input type="text" name="telephone" id="telephone" tabindex="68" value="<?php echo ''.$telephone.'' ?>" onchange="verifTelephone(this)"/> </p>
	</fieldset>
							
	<p> <input class="bouton_clic" type="submit" value="S'enregistrer"/> <span class="etoile">*</span> Champs obligatoires</p> 
</form>

Voici le code javascript que j'utilise:

function surligne(champ, erreur)
{
   if(erreur)
      champ.style.backgroundColor = "#fba";
   else
      champ.style.backgroundColor = "";
}

function verifPseudo(champ)
{
   if(champ.value.length < 4 || champ.value.length > 20)
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

function verifMail(champ)
{
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(champ.value))
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

function verifPasse(champ)
{
   if(champ.value.length < 6)
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

function verifConfirmpasse(champ1, champ2)
{
	if (champ2 == undefined)
	{
		var monForm = document.getElementById("monFormulaire");
		champ2 = document.getElementById("monForm").mot_de_passe;
		
		   if(champ1 != champ2)
		   {
		      surligne(champ1, true);
		      return false;
		   }
		   else
		   {
		      surligne(champ1, false);
		      return true;
		   }
	}
}

function verifCp(champ)
{
   var regex = /^[0-9][0-9]{3}[0-9]$/;
   if(!regex.test(champ.value))
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

function verifTelephone(champ)
{
   var regex = /^0[0-68]([-. ]?[0-9]{2}){4}$/;
   if(!regex.test(champ.value))
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

Le premier problème qui se pose c'est que même en utilisant onChange, la case se colore que lorsque le curseur sort de la case.
Second problème: c'est la fonction verifConfirmpasse. Elle ne fonctionne pas. Pourriez vous m'aider, me dire si vous voyez quelques chose d'anormal.

Merci à vous!

si tu veux avant de sortir du champ il faut mettre ton evènement sur le onkeyup ou onkeydown.

Ensuite pour ta fonction qui marche pas : combien il y a de paramètres dans la signature de la fonction ? Commbien tu en passes lors de la vérification ?

ensuite il te manque un var dans cette fonction. Tu peux récupérer champ2 directement par l'id non ? au lieu de passer par le formulaire…

Merci pour l'évènement ça marche bien.

Par contre pour la fonction je n'ai pas tout compris. J'ai un seul paramètre de transférer lors de l'appel de la fonction d'où mon if undefined.
Quel var il me manque dans la fonction?

Ici je crois :

champ2 = document.getElementById("monForm").mot_de_passe;

Ton champ n'a-t-il pas un id qui pourrait l'identifier sans être obligé de passer par le formulaire... ?