Page 1 of 1
JavaScript Hexadecimal 0-9 a-f color matching?
Posted: Fri Apr 25, 2008 10:29 pm
by JAB Creations
I'm trying to figure out how to construct a JavaScript hexadecimal matcher.
The value being checked must either be three or six characters long.
The valid characters are 0-9 and a-f.
So 00f, 1ab, fff, 234abc, b235af, are examples of colors and thus valid matches. I'm actually thinking it was easier to do this with PHP. In fact I will be doing this with PHP (never trust the client) but I'm trying to get this to work with JavaScript first (working on the form to begin with so when I have the form to submit data to PHP then I'll be validating form data at the server).
I'm thinking {3} || {6} might be how I check the string's range? Oh I can already tell this is going to be oddles of fun!

Re: JavaScript Hexadecimal 0-9 a-f color matching?
Posted: Fri Apr 25, 2008 11:28 pm
by JAB Creations
This seems to work, suggestions for improvement? I want to ensure both error alerts occur.
Code: Select all
<input class="text color" id="color_creator" name="color_creator" tabindex="3" type="text" value="" /><input class="button add" id="" name="" onclick="editor_add_color();" onkeypress="editor_add_color();" tabindex="3" type="button" value="Add #" />
Code: Select all
function editor_add_color() { custom_color = document.getElementById('color_creator').value; if (custom_color.length != '3' && custom_color.length != '6') {alert('Valid color length must be either three or six digits.'); return;} re=/^([0-9a-f]{1,2}){3}$/i; check=custom_color.match(re); if (null == check) {alert('Valid character ranges are \'0\' through \'9\' and \'a\' through \'f\'.'); return;} else {alert ('Accepted Value: '+check);}}
Re: JavaScript Hexadecimal 0-9 a-f color matching?
Posted: Sat Apr 26, 2008 1:40 am
by prometheuzz
You can "multiply" 1 and 2 by 3:
Don't you need to account the capital hexadecimal letters A-F?
Also, although I don't speak JavaScript, this if statement seems flawed:
Code: Select all
if (custom_color.length != '3' && custom_color.length != '6') { /* error */ }
which would accept every number except 3 and 6. Shouldn't that be:
Code: Select all
if (custom_color.length < '3' || custom_color.length > '6') { /* error */ }
HTH
Re: JavaScript Hexadecimal 0-9 a-f color matching?
Posted: Sat Apr 26, 2008 2:26 am
by JAB Creations
I'm not interested in upper case letters though I could merely convert them with JavaScript.
The length works perfectly, it matches for three or six characters in length exactly either way.
Re: JavaScript Hexadecimal 0-9 a-f color matching?
Posted: Sat Apr 26, 2008 2:57 am
by prometheuzz
Ah, I misunderstood! I though you also needed to accept lengths 4- and 5.
Then, no, I don't see anything wrong with your regex.
Re: JavaScript Hexadecimal 0-9 a-f color matching?
Posted: Mon Apr 28, 2008 2:17 am
by aCa
Instead of checking for the length before you do the regex, can't you just check the length in the regex? For example with this pattern:
Just a suggestion...
Re: JavaScript Hexadecimal 0-9 a-f color matching?
Posted: Mon Apr 28, 2008 2:30 am
by JAB Creations
By checking the length before the regex I'm able to make users aware of the available options. The regex is strictly for invalid characters. Nothing is more annoying then, 'Error'. ...huh? What do you mean error...why did I get an error? So it was very intentional.
