Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Regular Expressions in JavaScript Validating a Form Form Validation

Posted by Haardik Gupta
.a{fill-rule:evenodd;}techdegree
Haardik Gupta
Full Stack JavaScript Techdegree Student 5,459 Points

help js form validation

i tried multiple things for this challenge and can't seem to find a solution

In this challenge you'll write a validator for a hexadecimal string used to set a CSS color. Hexadecimal values for css colors start with a pound sign, or hash (#), then six characters that can either be a numeral or a letter between A and F, inclusive. Two examples of these strings would be #FF4569 and #578E9A.

For this step of the challenge, write a regular expression that will match any hexadecimal string and store it in a variable named hexRegEx. The regex should be case-insensitive. Assume that the string will always be 7 characters.

app.js 
// Type inside this function
function isValidHex(text) {

}

const hex = document.getElementById("hex");
const body = document.getElementsByTagName("body")[0];

hex.addEventListener("input", e => {
  const text = e.target.value;
  const valid = isValidHex(text);
  if (valid) {
    body.style.backgroundColor = "rgb(176, 208, 168)";
  } else {
    body.style.backgroundColor = "rgb(189, 86, 86)";
  }
});
index.html 
<!DOCTYPE html>
<html>

<head>
    <title>DOM Manipulation</title>
</head>
<link rel="stylesheet" href="style.css" />

<body>
    <div id="content">
        <p>Enter a valid hex value below to make the screen turn green.</p>
        <input type="text" id="hex">
    </div>
    <script src="app.js"></script>
</body>

</html>
Steven Parker
Steven Parker
229,695 Points
Steven Parker
Steven Parker
229,695 Points

This looks like the code provided before you start. Please show what you wrote, and we can go from there.

Zimri Leijen
Zimri Leijen
11,835 Points

I find https://regexr.com/ to be a good sandbox to try out regular expressions.

If you have more specific questions (and have shown a bit more effort than simply copypasting the whole challange), at least make a good faith attempt. I can help you with it.

There's no point in me or any other student solving the challenge for you.

Haardik Gupta
.a{fill-rule:evenodd;}techdegree
Haardik Gupta
Full Stack JavaScript Techdegree Student 5,459 Points

i have tried

// Type inside this function function isValidHex(text) { const hexRegEx = /^#[\da-f]{7}/i; }

const hex = document.getElementById("hex"); const body = document.getElementsByTagName("body")[0];

hex.addEventListener("input", e => { const text = e.target.value; const valid = isValidHex(text); if (valid) { body.style.backgroundColor = "rgb(176, 208, 168)"; } else { body.style.backgroundColor = "rgb(189, 86, 86)"; } });

2 Answers

Zimri Leijen
Zimri Leijen
11,835 Points
Zimri Leijen
Zimri Leijen
11,835 Points 
 const hexRegEx = /^#[\da-f]{7}/i

good try, this is very close to correct, however there are a few small details that need to be tweaked.

1) the regex itself does not correctly match all the values it should, while also matching some values it shouldn't

2) the function 

function isValidHex(text) { const hexRegEx = /^#[\da-f]{7}/i; }

is not doing anything other than declaring a constant. It should return true or false.

Try something like 

function isValidHex(text) {
  const hexRegEx /^#[\da-f]{7}/i;
  return hexRegEx.test(text)
}

this way it will test the text against the regEx and will return true or false (note that you'll still need to correct the RegEx, but you're on the right track).

Note you can use the Preview in the editor to check the functionality of your program.

Haardik Gupta
.a{fill-rule:evenodd;}techdegree
Haardik Gupta
Full Stack JavaScript Techdegree Student 5,459 Points

i tried that and received the following error

Bummer: SyntaxError: app.js: Unexpected token / (3:17)

and realized the = wasn't there so i added i but then received

Bummer: The regular expression stored in hexRegEx does not meet the requirements.

here is the js code i have

function isValidHex(text) { const hexRegEx = /^#[\da-f]{7}/i; return hexRegEx.test(text) }

Zimri Leijen
Zimri Leijen
11,835 Points

sorry I forgot the =

function isValidHex(text) {
  const hexRegEx = /^#[\da-f]{7}/i;
  return hexRegEx.test(text)
}

with this, you should get: Bummer: The regular expression stored in hexRegEx does not meet the requirements.

I can give you another hint as to why.

the {7} applies to the preceding token, group or set, in this case it matches the [\da-f] in other words, it looks for a # followed by 7 characters in the set 0-9 and/or a-f (or A-F).

on top of that, it doesn't care if there are any characters following that, because once it finds a match, it considers it true, and you can have whatever characters after that and it won't matter.

I think you can solve it from there. :)

Steven Parker
Steven Parker
229,695 Points
Steven Parker
Steven Parker
229,695 Points

Here's a few hints:

  • a color hex value has six characters
  • the color value is preceded by a "#" character
  • the regex must anchor the pattern at both the beginning and the end
  • adding the letter "i" at the end of a regex makes it case-insensitive