[RESOLVED] Validating hexadecimal color

**Carmel819** · 09-18-2010 04:27 PM

Hi all! I'm trying to validate this form but can't seem to figure out the code in order to validate the last field in my form which is asking the user to input a hexadecimal color. Getting it to search for a "#" would probably be sufficient for this exercise. Suggestions?

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

<!-- Début

//Valider formulaire
function valider(){

if (document.testform.Prenom.value=="") {
alert("S.V.P. indiquez votre prénom!")
return false
}
if (document.testform.Nom.value=="") {
alert("S.V.P. indiquez votre nom de famille!")
return false
}
if (document.testform.Couleur.value=="") {
alert("S.V.P. indiquez votre couleur préféré!")
return false
}

return true
}

//Message de bienvenue en fonction de l'heure
{
	aujourdui = new Date()
	heures = aujourdui.getHours()
	if (heures < 6){msg = "Bonne nuit!"}
	if (heures > 6 && heures <12){msg = "Bon matin! "}
	if (heures > 12 && heures <18){msg = "Bonne après-midi! "}
	if (heures >18){msg = "Bonne soirée! "}
	document.write(msg)
}

// Fin -->
</SCRIPT>
</head>
<body>
<FORM name="testform" onSubmit="return valider()">
<br />
Pr&eacute;nom:&nbsp;<input type="text" size=30 name="Prenom"><br />
Nom:&nbsp;<input type="text" size=30 name="Nom"><br />
Couleur pr&eacute;f&eacute;r&eacute;:&nbsp;<input type="text" size=30 name="Couleur"></br />
<input type="submit" value="Valider">
</FORM>
</body>
</html>

**MikeOS** · 09-18-2010 06:54 PM

Whoops sorry I did put up a solution for you but I made an error, I'll correct it and put it up later.

**Carmel819** · 09-18-2010 07:45 PM

It seems to work? My next step is to use that value to change the background color...? I'll work at that part tomorrow as I'm getting cross-eyed. Thanks for your help! Much appreciated!

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

<!-- Début

//Valider formulaire
function valider(){

if (document.testform.Prenom.value=="") {
alert("S.V.P. indiquez votre prénom!")
return false;
}
if (document.testform.Nom.value=="") {
alert("S.V.P. indiquez votre nom de famille!")
return false;
}
if (document.testform.Couleur.value=="") {
alert("S.V.P. indiquez votre couleur préféré!")
return false;
}

var inputField = document.getElementById("Couleur").value.substr(1);
if (!/^[a-f0-9]{3}$|^[a-f0-9]{6}$/i.test(inputField))
{
	alert("Vous devez indiquez une valeur hexidécimale!");
return false;
}

return true;
}

//Message de bienvenue en fonction de l'heure
{
	aujourdui = new Date()
	heures = aujourdui.getHours()
	if (heures < 6){msg = "Bonne nuit!"}
	if (heures > 6 && heures <12){msg = "Bon matin! "}
	if (heures > 12 && heures <18){msg = "Bonne après-midi! "}
	else document.write("Bonne soirée! ")
}

// Fin -->
</SCRIPT>
</head>
<body>
<FORM name="testform" onSubmit="return valider()">
<br />
Pr&eacute;nom:&nbsp;<input type="text" size=30 name="Prenom"  onBlur="valider()"<br />
Nom:&nbsp;<input type="text" size=30 name="Nom" onBlur="valider()" /><br />
Couleur pr&eacute;f&eacute;r&eacute;:&nbsp;<input type="text" size=30 id="Couleur" onBlur="valider()" maxlength="7" /></br />
<input type="submit" value="Valider">
</FORM>
</body>
</html>

**Sterling Isfine** · 09-18-2010 08:31 PM

Expects #hhh or #hhhhhh

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>VIVE LA DIFFÉRENCE</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

//Valider formulaire

function valider( f )
{
 var rv = true;
  
 if( !/\S/.test( f.Prenom.value ) ) 
 {
  alert("S.V.P. indiquez votre prénom!")
  rv = false;
 }

 if ( rv && !/\S/.test( f.Nom.value ) ) 
 {
  alert("S.V.P. indiquez votre nom de famille!")
  rv =  false;
 }

 if( rv &&  !/^#[a-f0-9]{3}([a-f0-9]{3})?$/i.test( f.Couleur.value.replace( /^\s+|\s+$/g, '' ) ) )
 {
  alert("S.V.P. indiquez votre couleur préféré!")
  rv = false;
 }

 return rv;
}

//Message de bienvenue en fonction de l'heure
{
	aujourdui = new Date()
	heures = aujourdui.getHours()
	if (heures < 6){msg = "Bonne nuit!"}
	if (heures > 6 && heures <12){msg = "Bon matin! "}
	if (heures > 12 && heures <18){msg = "Bonne après-midi! "}
	if (heures >18){msg = "Bonne soirée! "}
	document.write(msg);
}

var bgColor;

if( ( bgColor = decodeURIComponent( location.search ).match( /(\?|\&|\&amp;)Couleur=(#[0-9a-f]{3}([0-9a-f]{3}))?(&|$)/ ) ) )
{
 document.body.style.backgroundColor = bgColor[ 2 ];
}   

</script>
</head>
<body>

<form name="testform" onSubmit="return valider( this )" action=''>
<p>
Pr&eacute;nom:&nbsp;<input type="text" size=30 name="Prenom"><br>
Nom:&nbsp;<input type="text" size=30 name="Nom"><br>
Couleur pr&eacute;f&eacute;r&eacute;:&nbsp;<input type="text" size=30 name="Couleur"><br>
<input type="submit" value="Valider">
</form>
</body>
</html>

**Carmel819** · 09-19-2010 12:45 PM

Thanks for your help! I had it working but then after I added a few new elements the error message when an invalid color is entered stopped functioning. I've continue my code in a new thread if anyone cares to take a look.

http://www.webdeveloper.com/forum/sh...d.php?t=235880

Thread: [RESOLVED] Validating hexadecimal color

Thread Tools

Display

[RESOLVED] Validating hexadecimal color

Like this?

Continued...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions