Validate Hex Textfield Not Working

Question

I'm trying to validate a textfield for hex colors only using regex. I stumbled upon this answer, and tried it for my textField, and it doesn't work as I expect it to. Here's the code:

/^[0-9A-F]{6}$/i.test(e.target.value)

It's supposed to check if the textfield is 0 - 9 || A - F (capital or lowercase), but when I log that, it always says false.

How can I validate a hex textfield?

Full Code:

JSFiddle

document.getElementById('hexTextField').addEventListener('keyup', function(e) {
  // Allow: tab, home, end, left, up, right, down
  if ([9, 36, 35, 37, 38, 39, 40].indexOf(e.keyCode) !== -1 ||
    // Allow: Ctrl || Command && a, c, x and v
    (!0 === e.ctrlKey || !0 === e.metaKey) && /65|67|88|86/.test(e.keyCode)) {
    if (e.keyCode === 86 && /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(e.target.value)) {
      //myColor.setColor(e.target.value, 'hex');
    }
    return;
  }

  console.log(/^[0-9A-F]{6}$/i.test(e.target.value));
  if (/^[0-9A-F]{6}$/i.test(e.target.value)) {
    //myColor.setColor(e.target.value, 'hex');
  } else {
    e.preventDefault();
  }
});

<input type="text" id="hexTextField" spellcheck="false" maxlength="6">

Update

There seems to be some confusion of what exactly I'm asking. I'm trying to validate the textField as the user is typing, not when the user finished. I hope this will clarify my question.

You can add a `pattern="[0-9a-fA-F]{3}|[0-9a-fA-F]{6}"` to the `input` tag. — Wiktor Stribiżew, May 24 '16 at 21:00
Store input as **val** , convert **val.toString()** and test this with yout Regexp. — Arif Burhan, May 24 '16 at 21:23
@Jessica: i don't know, how would you tell? i would use the pattern attrib and an _input_ event (instead of keyup), or invert the regexp and .replace() the .value with it so as to remove any un-allowed chars. — dandavis, May 24 '16 at 21:30
@WiktorStribiżew Whatever way I do it, I need the regex to work. Can you please help me with that? — Jessica, May 24 '16 at 23:08
Validate what? It is 1 AM, I am going to bed. `pattern="[0-9a-fA-F]{3}|[0-9a-fA-F]{6}"` will validate if a string input has 3 or 6 hex characters. See [this fiddle](https://jsfiddle.net/wjpewr41/1/). I would not do it the way you are doing. — Wiktor Stribiżew, May 24 '16 at 23:13
@WiktorStribiżew I didn't know what time it was by you. But the JSFiddle you sent stiff doesn't validate it — Jessica, May 25 '16 at 01:19
@AtesGoral windows 10. Does it preventDefault() by you? What happens? — Jessica, May 25 '16 at 01:46

score 0 · Answer 1 · answered May 25 '16 at 23:00

What the regex code does is, it checks if the textfield has the 'valid' chars, && if there are 6 chars in the textfield.

So if one would want to validate the textfield as the user types, you would use this regex:

/[0-9A-Fa-f]$/i

Notice, I removed the {6} which comes out to true only if there are 6 chars.

Validate Hex Textfield Not Working

JSFiddle

1 Answers1