[JavaScript] Colorer une case a distance

CartOu -  
Bonjour, je vous explique mon probleme, il est TRES simple, mais, le titre parait "barbare" :)

En gros, j'ai fait des input sur mon site WEB pour laisser la possibilitée a l'internaute de s'inscrire a mon site. J'ai ajouter du javascript, pour lui dire qu'il avait oublié de remplire un champ. Mais, je souhaiterais colorer la case qui pose probleme de rouge. Est-ce possible?

Merci de vos reponces.

CartOu

Voici le code de la page en question. Merci

<?php connection a MySQL
?>

<html>
<head>
<title>Assistant d'envoi de formulaires</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript"><!-- Hide script from older browsers
function verifSelection() {

if (accepter.pseudo.value == "" || accepter.pseudo.value == "Identifiant") {
alert("Vous avez pas spécifié d'identifiant. ")
return false
}

if (accepter.adresse_mail.value == "" || accepter.adresse_mail.value == "login@domaine.fr") {
alert("Vous n'avez pas rempli votre adresse E-mail.")
return false
}

invalidChars = " /:,;'"

for (i=0; i<invalidChars.length; i++) { // does it contain any invalid characters?
badChar = invalidChars.charAt(i)

if (accepter.adresse_mail.value.indexOf(badChar,0) > -1) {
alert("Votre adresse e-mail contient des caractéres invalides. Veuillez vérifier.")
accepter.adresse_mail.focus()
return false
}
}

atPos = accepter.adresse_mail.value.indexOf("@",1) // there must be one "@" symbol
if (atPos == -1) {
alert('Votre adresse e-mail ne contient pas le signe "@". Veuillez vérifier.')
accepter.adresse_mail.focus()
return false
}

if (accepter.adresse_mail.value.indexOf("@",atPos+1) != -1) { // and only one "@" symbol
alert('Il ne doit y avoir qu\'un signe "@". Veuillez vérifier.')
accepter.adresse_mail.focus()
return false
}

periodPos = accepter.adresse_mail.value.indexOf(".",atPos)

if (periodPos == -1) { // and at least one "." after the "@"
alert('Vous avez oublié le point "." aprés le signe "@". Veuillez vérifier.')
accepter.adresse_mail.focus()
return false
}

if (periodPos+3 > accepter.adresse_mail.value.length) { // must be at least 2 characters after the
alert('Il doit y avoir au moins deux caractéres après le signe ".". Veuillez vérifier.')
accepter.adresse_mail.focus()
return false
}

if (accepter.adresse_mail_verif.value == "" || accepter.adresse_mail_verif.value == "login@domaine.fr") {
alert("Vous n'avez pas remplie ['Adresse E-mail(verification)']")
return false
}

if (accepter.adresse_mail.value != accepter.adresse_mail_verif.value) {
alert("La verification de l'email n'est pas bonne")
return false
}

if (accepter.nom.value == "" || accepter.nom.value == "Nom") {
alert("Vous n\'avez pas spécifié votre nom.")
return false
}

if (accepter.prenom.value == "" || accepter.prenom.value == "Prenom") {
alert("Vous n\'avez pas spécifié votreprenom?")
return false
}

if (accepter.jour_naissance.value == "" || accepter.mois_naissance.value == "" || accepter.annee_naissance.value == "" || accepter.jour_naissance.value == "**" || accepter.mois_naissance.value == "**" || accepter.annee_naissance.value == "****") {
alert("Veuillez entrer votre date de naissance.")
return false
}

if (accepter.pays.value == "") {
alert("Vous ,\'avez pas spécifié votre pays.")
return false
}

if (accepter.departement.value == "" || accepter.departement.value == "**") {
alert("Vous n\'avez pas spécifié votre département. ")
return false
}

<?php
// fonction d'auto generation d'un code
$code_robot = substr(md5(mt_rand()), 0, 6);
?>

if (accepter.anti_robot.value == "") {
alert("Veuillez verifier le code de vérification.")
return false
}

<?php
if ($_POST['anti_robot'] != $code_robot) {
?>
alert("Veuillez verifier le code vérification.")
<?php
}
?>
} // Fin de la fonction
</script>
</head>

<body>
<form name="accepter" method="post" action="<?=$PHP_SELF?>" onSubmit="return verifSelection()">
<table>

<tr>

<td align="center">Cr�ez votre identifiant XGamo
</td>
</tr>
<tr>
<td>Identifiant:</td> <td align="center"><input type="text" maxlength="30" name="pseudo" value="Identifiant" onfocus="if (this.value == 'Identifiant') this.value = '';"></td>
</tr>
<tr>
<td>Adresse E-mail: </td> <td align="center"><input type="text" name="adresse_mail" value="login@domaine.fr" onfocus="if (this.value == 'login@domaine.fr') this.value = '';"></td>
</tr>
<tr>
<td>Adresse E-mail(verification): </td> <td align="center"><input type="text" name="adresse_mail_verif"></td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td align="center">Entrez vos informations personnelles</td>
</tr>
<tr>
<td>Nom*: </td> <td align="center"><input type="text" name="nom" value="Nom" onfocus="if (this.value == 'Nom') this.value = '';"></td>
</tr>
<tr>
<td>Prenom*: </td> <td align="center"><input type="text" name="prenom" value="Prenom" onfocus="if (this.value == 'Prenom') this.value = '';"></td>
</tr>
<tr>
<td>Sexe*: </td> <td align="center"><input type="radio" name="mas_fem" value="masculin" checked>Masculin <input type="radio" name="mas_fem" value="feminin">Feminin</td>
</tr>
<tr>
<td>Date de naissance*: </td> <td align="center"> <input type="text" size="2" name="jour_naissance" maxlength="2" value="**" onfocus="if (this.value == '**') this.value = '';">/
<input type="text" size="2" name="mois_naissance" maxlength="2" value="**" onfocus="if (this.value == '**') this.value = '';">/
<input type="text" size="4" name="annee_naissance" maxlength="4" value="****" onfocus="if (this.value == '****') this.value = '';"></td>
</tr>
<tr>
<td>Pays/Region*: </td> <td align="center"> <input type="text" name="pays" value="France"></td>
</tr>
<tr>
<td>Département*: </td> <td align="center"> <input type="text" name="departement" value="**" onfocus="if (this.value == '**') this.value = '';"></td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>Recopiez les caracteres qui s'affichent a gauche de la zone de saisie ( 6 caracteres) </td>
</tr>
<tr>
<td>Code : <?php echo $code_robot; ?></td>
</tr>
<tr>
<td><input type="text" name="anti_robot"></td>
</tr>
<tr>
<td align="center"> <input name="envoi" type="submit" value="Accepter"></td>
</tr>

</table>

<!--
pseudo
adresse_mail
adresse_mail_verif
nom
prenom
mas_fem
jour_naissance
mois_naissance
annee_naissance
pays
departement
-->

</body>
</html>

<?php // PARTIE 2

if ($_POST['envoi']) {
echo "<br>" ;
echo "<br>" ;

echo $_POST['pseudo'];
echo "<br>" ;
echo $_POST['adresse_mail'];
echo "<br>" ;
echo $_POST['nom'];
echo "<br>" ;
echo $_POST['prenom'];
echo "<br>" ;
echo $_POST['mas_fem'];
echo "<br>" ;
echo $_POST['jour_naissance'];
echo "<br>" ;
echo $_POST['mois_naissance'];
echo "<br>" ;
echo $_POST['annee_naissance'];
echo "<br>" ;
echo $_POST['pays'];
echo "<br>" ;
echo $_POST['departement'];
}

?>

</body>
</html>
<?php mysql_close();?>
Configuration: Windows XP
Firefox 2.0.0.14

7 réponses

  1. artragis 
    <script language="JavaScript"><!-- Hide script from older browsers 
function verifSelection() { 


if (accepter.pseudo.value == "" || accepter.pseudo.value == "Identifiant") { 
alert("Vous avez pas spécifié d'identifiant. ") 
accepter.pseudo.color=red
return false 
} 


if (accepter.adresse_mail.value == "" || accepter.adresse_mail.value == "login@domaine.fr") { 
alert("Vous n'avez pas rempli votre adresse E-mail.") 
accepter.adresse_mail.color=red
return false 
} 


invalidChars = " /:,;'" 

for (i=0; i<invalidChars.length; i++) { // does it contain any invalid characters? 
badChar = invalidChars.charAt(i) 

if (accepter.adresse_mail.value.indexOf(badChar,0) > -1) { 
alert("Votre adresse e-mail contient des caractéres invalides. Veuillez vérifier.") 
accepter.adresse_mail.focus() 
return false 
} 
} 


atPos = accepter.adresse_mail.value.indexOf("@",1) // there must be one "@" symbol 
if (atPos == -1) { 
alert('Votre adresse e-mail ne contient pas le signe "@". Veuillez vérifier.') 
accepter.adresse_mail.focus() 
return false 
} 

if (accepter.adresse_mail.value.indexOf("@",atPos+1) != -1) { // and only one "@" symbol 
alert('Il ne doit y avoir qu\'un signe "@". Veuillez vérifier.') 
accepter.adresse_mail.focus() 
return false 
} 

periodPos = accepter.adresse_mail.value.indexOf(".",atPos) 

if (periodPos == -1) { // and at least one "." after the "@" 
alert('Vous avez oublié le point "." aprés le signe "@". Veuillez vérifier.') 
accepter.adresse_mail.focus() 
return false 
} 

if (periodPos+3 > accepter.adresse_mail.value.length) { // must be at least 2 characters after the 
alert('Il doit y avoir au moins deux caractéres après le signe ".". Veuillez vérifier.') 
accepter.adresse_mail.focus() 
return false 
} 

if (accepter.adresse_mail_verif.value == "" || accepter.adresse_mail_verif.value == "login@domaine.fr") { 
alert("Vous n'avez pas remplie ['Adresse E-mail(verification)']") 
return false 
} 


if (accepter.adresse_mail.value != accepter.adresse_mail_verif.value) { 
alert("La verification de l'email n'est pas bonne") 
return false 
} 


if (accepter.nom.value == "" || accepter.nom.value == "Nom") { 
alert("Vous n\'avez pas spécifié votre nom.") 
return false 
} 

if (accepter.prenom.value == "" || accepter.prenom.value == "Prenom") { 
alert("Vous n\'avez pas spécifié votreprenom?") 
return false 
} 


if (accepter.jour_naissance.value == "" || accepter.mois_naissance.value == "" || accepter.annee_naissance.value == "" || accepter.jour_naissance.value == "**" || accepter.mois_naissance.value == "**" || accepter.annee_naissance.value == "****") { 
alert("Veuillez entrer votre date de naissance.") 
return false 
} 


if (accepter.pays.value == "") { 
alert("Vous ,\'avez pas spécifié votre pays.") 
return false 
} 

if (accepter.departement.value == "" || accepter.departement.value == "**") { 
alert("Vous n\'avez pas spécifié votre département. ") 
return false 
} 


<?php 
// fonction d'auto generation d'un code 
$code_robot = substr(md5(mt_rand()), 0, 6); 
?> 

if (accepter.anti_robot.value == "") { 
alert("Veuillez verifier le code de vérification.") 
return false 
} 

<?php 
if ($_POST['anti_robot'] != $code_robot) { 
?> 
alert("Veuillez verifier le code vérification.") 
<?php 
} 
?> 
} // Fin de la fonction 
</script>
    1
    1. artragis
      alors mets les après les return faulse. en effet là il y a une erreur dans cett eordre... désolé
      1
      1. artragis
        escuse encore, mais bon ça fait longtemps que j'ai pas fait de Jscipt mais bon, après avoir parcouru le forum, j'ai trouvé la propriété qui te permettra de changer la couleur de tes input box
        accepter.adresse_mail.style.color=red si ça marche pas ben désolé
        1
        1. CartOu
          Merci, mais, si j'ai bien sais, ceci modifiera l'interieur de la case, ou, le texte qui est présent?
          0
          1. artragis
            si c pas lcolor qui modifie l'interrieur alors c'est bgcolor lol
            0
        3. CartOu
          Heu ... J'ai un ptit problème : J'ai mis ton code avant chaque return false } , mais, a présent, plus rien ne s'affiche :'( La page reste vierge. Je t'envois un lien, si tu vx regarder http://xgamo.free.fr/inscription.php

          Et, voici le code 

          
<?php
Connection a MySQL
?>


<html>
<head>
<title>Assistant d'envoi de formulaires</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript"><!-- Hide script from older browsers
function verifSelection() {


if (accepter.pseudo.value == "" || accepter.pseudo.value == "Identifiant") {
alert("Vous avez pas sp&eacute;cifi&eacute; d'identifiant. ")
accepter.pseudo.color=red
return false
}


if (accepter.adresse_mail.value == "" || accepter.adresse_mail.value == "login@domaine.fr") {
alert("Vous n'avez pas rempli votre adresse E-mail.")
accepter.adresse_mail.color=red
return false
}


invalidChars = " /:,;'"

for (i=0; i<invalidChars.length; i++) {	// does it contain any invalid characters?
badChar = invalidChars.charAt(i)

if (accepter.adresse_mail.value.indexOf(badChar,0) > -1) {
alert("Votre adresse e-mail contient des caract&eacute;res invalides. Veuillez v&eacute;rifier.")
accepter.adresse_mail.focus()
accepter.adresse_mail.color=red
return false
}
}


atPos = accepter.adresse_mail.value.indexOf("@",1)			// there must be one "@" symbol
if (atPos == -1) {
alert('Votre adresse e-mail ne contient pas le signe "@". Veuillez v&eacute;rifier.')
accepter.adresse_mail.focus()
accepter.adresse_mail.color=red
return false
}

if (accepter.adresse_mail.value.indexOf("@",atPos+1) != -1) {	// and only one "@" symbol
alert('Il ne doit y avoir qu\'un signe "@". Veuillez v&eacute;rifier.')
accepter.adresse_mail.focus()
accepter.adresse_mail.color=red
return false
}

periodPos = accepter.adresse_mail.value.indexOf(".",atPos)

if (periodPos == -1) {					// and at least one "." after the "@"
alert('Vous avez oubli&eacute; le point "." aprés le signe "@". Veuillez v&eacute;rifier.')
accepter.adresse_mail.focus()
accepter.adresse_mail.color=red
return false
}

if (periodPos+3 > accepter.adresse_mail.value.length)	{		// must be at least 2 characters after the 
alert('Il doit y avoir au moins deux caractéres apr&egrave;s le signe ".". Veuillez v&eacute;rifier.')
accepter.adresse_mail.focus()
accepter.adresse_mail.color=red
return false
}

if (accepter.adresse_mail_verif.value == "" || accepter.adresse_mail_verif.value == "login@domaine.fr") {
alert("Vous n'avez pas remplie ['Adresse E-mail(verification)']")
accepter.adresse_mail_verif.color=red
return false
}


if (accepter.adresse_mail.value != accepter.adresse_mail_verif.value) {
alert("La verification de l'email n'est pas bonne")
accepter.adresse_mail.color=red
accepter.adresse_mail_verif.color=red
return false
}


if (accepter.nom.value == "" || accepter.nom.value == "Nom") {
alert("Vous n\'avez pas sp&eacute;cifi&eacute; votre nom.")
accepter.nom.color=red
return false
}

if (accepter.prenom.value == "" || accepter.prenom.value == "Prenom") {
alert("Vous n\'avez pas sp&eacute;cifi&eacute; votreprenom?")
accepter.prenom.color=red
return false
}


if (accepter.jour_naissance.value == "" || accepter.mois_naissance.value == "" || accepter.annee_naissance.value == "" || accepter.jour_naissance.value == "**" || accepter.mois_naissance.value == "**" || accepter.annee_naissance.value == "****") {
alert("Veuillez entrer votre date de naissance.")
accepter.jour_naissance.color=red
accepter.mois_naissance.color=red
accepter.annee_naissance.color=red
return false
}


if (accepter.pays.value == "") {
alert("Vous ,\'avez pas sp&eacute;cifi&eacute; votre pays.")
accepter.pays.color=red
return false
}

if (accepter.departement.value == "" || accepter.departement.value == "**") {
alert("Vous n\'avez pas sp&eacute;cifi&eacute; votre d&eacute;partement. ")
accepter.departement.color=red
return false
}


<?php 
// fonction d'auto generation d'un code
$code_robot = substr(md5(mt_rand()), 0, 6);
?>

if (accepter.anti_robot.value == "") {
alert("Veuillez verifier le code de v&eacute;rification.")
accepter.anti_robot.color=red
return false
}

<?php
if ($_POST['anti_robot'] != $code_robot) {
?>
alert("Veuillez verifier le code v&eacute;rification.")
<?php
}
?>
} // Fin de la fonction
</script>
</head>

<body>
<form name="accepter" method="post" action="<?=$PHP_SELF?>" onSubmit="return verifSelection()">
<table>

	<tr>

		<td align="center">Cr&eacute;ez votre identifiant XGamo
		</td>
	</tr>
	<tr>
		<td>Identifiant:</td> <td align="center"><input type="text" maxlength="30" name="pseudo" value="Identifiant" onfocus="if (this.value == 'Identifiant') this.value = '';"></td>
	</tr>
	<tr>
		<td>Adresse E-mail: </td> <td align="center"><input type="text" name="adresse_mail" value="login@domaine.fr" onfocus="if (this.value == 'login@domaine.fr') this.value = '';"></td>
	</tr>
	<tr>
		<td>Adresse E-mail(v&eacute;rification): </td> <td align="center"><input type="text" name="adresse_mail_verif"></td>
	</tr>
	<tr>
		<td><hr></td>
	</tr>
	<tr>
		<td align="center">Entrez vos informations personnelles</td>
	</tr>
	<tr>
		<td>Nom*:  </td> <td align="center"><input type="text" name="nom" value="Nom" onfocus="if (this.value == 'Nom') this.value = '';"></td>
	</tr>
	<tr>
		<td>Pr&eacute;nom*:  </td> <td align="center"><input type="text" name="prenom" value="Prenom" onfocus="if (this.value == 'Prenom') this.value = '';"></td>
	</tr>
	<tr>
		<td>Sexe*:  </td> <td align="center"><input type="radio" name="mas_fem" value="masculin" checked>Masculin  <input type="radio" name="mas_fem" value="feminin">Feminin</td>
	</tr>
	<tr>
		<td>Date de naissance*: </td> <td align="center"> <input type="text" size="2" name="jour_naissance" maxlength="2" value="**" onfocus="if (this.value == '**') this.value = '';">/
								<input type="text" size="2" name="mois_naissance" maxlength="2" value="**" onfocus="if (this.value == '**') this.value = '';">/
								<input type="text" size="4" name="annee_naissance" maxlength="4" value="****" onfocus="if (this.value == '****') this.value = '';"></td>
	</tr>
	<tr>
		<td>Pays/Region*: </td> <td align="center"> <input type="text" name="pays" value="France"></td>
	</tr>
	<tr>
		<td>D&eacute;partement*: </td> <td align="center"> <input type="text" name="departement" value="**" onfocus="if (this.value == '**') this.value = '';"></td>
	</tr>
	<tr>
		<td><hr></td>
	</tr>
	<tr>
		<td>Recopiez les caracteres qui s'affichent a gauche de la zone de saisie ( 6 caract&eagrave;res) </td>
	</tr>
	<tr>
		<td>Code : <?php echo $code_robot; ?></td>
	</tr>
	<tr>
		<td><input type="text" name="anti_robot"></td>
	</tr>
	<tr>
		<td align="center"> <input name="envoi" type="submit" value="Valider"></td>
	</tr>

</table>





<!--
pseudo
adresse_mail
adresse_mail_verif
nom
prenom
mas_fem
jour_naissance
mois_naissance
annee_naissance
pays
departement
-->

</body>
</html>







<?php // PARTIE 2 

if ($_POST['envoi']) {
echo "<br>" ;
echo "<br>" ;

echo $_POST['pseudo'];
echo "<br>" ;
echo $_POST['adresse_mail'];
echo "<br>" ;
echo $_POST['nom'];
echo "<br>" ;
echo $_POST['prenom'];
echo "<br>" ;
echo $_POST['mas_fem'];
echo "<br>" ;
echo $_POST['jour_naissance'];
echo "<br>" ;
echo $_POST['mois_naissance'];
echo "<br>" ;
echo $_POST['annee_naissance'];
echo "<br>" ;
echo $_POST['pays'];
echo "<br>" ;
echo $_POST['departement'];
}

?>

<?php/*
Alors il fo que tu trouve une solution pour mé email é que tu te débrouille pour ariver a maitre un .htaccess qui marche sur le site :) é moi je fait la page pour envoyé d truc(image) et celle d inscription ok ?( et je tri le ftp fin je comence 2min
*/
?>
</body>
</html>
<?php mysql_close();?>
          0
          1. CartOu
            Après, sa affiche bien mes input, sa marche bien pour vérifier les zones, mais, niveau couleure, sa laisse a désirer mdrrr
            0
            1. CartOu
              Et sa continu encore et encore,
              Ce n'est que le début, dacord , dacord

              xD

              Rien ne change. Regarde la source si tu veut. Ou, ajoute mon msn, sa ira + vite =)

              cassinat.benjamin@live.fr
              0

              Discussions similaires

              java script error in the main process
              ceciel2307

              3 réponses
              Comment partager ma connexion à distance
              Jessy

              1 réponse
              cocher des cases
              beli

              6 réponses
              Comment utiliser sa connexion internet à distance?
              AnowFray

              20 réponses
              DISTANCE ET PARTAGE DE CONNEXION
              nuza

              3 réponses