www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Validating hexadecimal color

Hybrid View

  1. #1
    Join Date
    Sep 2010
    Location
    Québec, Canada
    Posts
    11

    resolved [RESOLVED] Validating hexadecimal color

    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>

  2. #2
    Join Date
    Nov 2002
    Location
    London UK
    Posts
    154
    Whoops sorry I did put up a solution for you but I made an error, I'll correct it and put it up later.
    Last edited by MikeOS; 09-18-2010 at 07:57 PM.

  3. #3
    Join Date
    Sep 2010
    Location
    Québec, Canada
    Posts
    11

    Question Like this?

    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>

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    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>
    Last edited by Sterling Isfine; 09-18-2010 at 10:03 PM.

  5. #5
    Join Date
    Sep 2010
    Location
    Québec, Canada
    Posts
    11

    Arrow Continued...

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles