[JavaScript] Colorer une case a distance

CartOu -  
 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 Messages postés 510 Statut Membre 146
     
    <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
  2. artragis Messages postés 510 Statut Membre 146
     
    alors mets les après les return faulse. en effet là il y a une erreur dans cett eordre... désolé
    1
  3. artragis Messages postés 510 Statut Membre 146
     
    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
  4. 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 Messages postés 510 Statut Membre 146
       
      si c pas lcolor qui modifie l'interrieur alors c'est bgcolor lol
      0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. 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
  7. 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
  8. 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