Cant pass #9 story--Build a Survey Form

Tell us what’s happening:
Here is my codepen link -
I can not pass number 9 on the tests. Currently my form has no structure, but I wanted to pass the test first then build the structure to make it graphically pleasing.

Can anyone tell me why I am not passing number 9?

User Story #9: If I enter numbers outside the range of the number input, I will see an HTML5 validation error.

Your code so far

Phone Number

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:

You are using minlength and maxlength attritbutes for the input with id=“number”. To pass the test, you should be using min and max, but it makes no sense to have a telephone number which can only be the number 9 through 15. Think about making an input field which make sense to have only a range of number (i.e. Number of years of work experience).

It is supposed to be a phone number, though.

You can still have a phone number input, but just don’t use that one as the one have for id=“number”. You can add extra fields beyond what the user stories require.

If I do id=“tel” it says that I need to allow numbered input. If I do id=“number” it throws the above error.

But phone numbers have use the following numbers 1234567890, not 9 10 11 12 13 14 15

Ohhh… It is asking for an additional field.
I understand now.

The user stories are the minimum requirements for the project. As long as you meet the minimum requirements, you pass the test. You are free to add other things as long as they do not affect the required items.

The issue is that 8 and 9 will not be recognized as completed. Even though I can get them to do what the requirements want them to do in the actual page.

Test it out, you will see.

#9 doesn’t even make sense, cause if you use “number” as type, you can not enter in letters at all.

The reason you are failing #9 and #10 is because you have not followed the user stories and error messages showing in the unit tests. The problem you should never have passed test #7, but it is not looking for what it says it is. You should be putting id=“number” on the input element instead of the div (as seen below). Then inside your label tag your for would be for=“number” and inside the input tag you would be using min=“someNumber” and max=“someHigherNumber” to meet the requirements of test #9.

So instead of your current div below:

 <div id="number">
    <label id="YearsOfExperience" for="Years Of Work Expoerience">Years of Work Experience</label>
    <input type="number" placeholder="00" minlength="1" maxlength="3" size="3" required>

you would have something like:

 <div id="yearsOfExp">
    <label id="YearsOfExperience" for="number">Years of Work Experience</label>
    <input id="number" type="number" placeholder="1" min="1" max="10" size="3" required>

Darn it! I misarranged those things. Okay. I will try this and report back. Thanks for being so active on the chat forum.