Hi All,
I am trying to solve the use case " If I enter numbers outside the range of the number input, I will see an HTML5 validation error." This use case is part of the 2nd Project “survey form” for Responsive Web Design Certification.
I have tried a lot of techniques but its not working, any help / guidance will be appreciated as I am only stuck on this one use case, rest all 16 use cases have completed successfully.
Looking forward for some help . Many thanks in advance to all .
You can use number field and use min max attribute or pattern attribute where you can implement regex validation.
And use title attribute to customise validation message. I hope it will help you if you just want to use HTML.
if you are talking about the project, please post the link to it
you just probably need to set the correct type attribute
Hi ieahleen,
Thank you for your revert. Below is the link to my code:
https://codepen.io/MV3011/pen/yLYmzeY?editors=1100
Kindly let me know what I can add to solve the problem.
Thanks a lot for the help.
Hi Rizimore,
Thanks for your revert, I have tried using min max and pattern attributes but doesnt seem to work somehow.
If possible would request to pl. have look at my code :https://codepen.io/MV3011/pen/yLYmzeY?editors=1100
Kindly let me know on how can solve this problem.
Thanks a lot for the help.
please include the test suite in your project, if this is the project for Free Code Camp
please include it in your project as required (you need to submit a project with test suite included and all tests passing)
Yes I got that but I am not able to fulfill use case No. 9 - " If I enter numbers outside the range of the number input, I will see an HTML5 validation error, as stated in my original query.
Were you able to access the Test Suite link with my code tested in it?
I have run the test and below is the screenshot of the same:
Pl. if possible with the code for use case No. 9. Thanks.
below the failed user story there is written why it is failing
but you really should add the script to your pen
add this in the last line of your HTML box to add the test suite to your project as required:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Not able to understand why its failing from the data below the failed user story, which is as below:
Minimum number should be defined : expected NaN not to be NaN
AssertionError: Minimum number should be defined : expected NaN not to be NaN
at o. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:15588)
at o.e (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:425:182)
at Object.get ()
at Object.e [as get] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:92:1382)
at Function.n.isNotNaN (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1677)
at a. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:134377)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:36606
at i.p.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:36901)
at N.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:42814)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:43780
As in the code, I have defined min and max values, not sure what more is required.
Requesting all to pl. help .
hi @mv3011,
you need to fix the property 
type="number" min"0" max="10"
find the odd of the html code above.
Yes just figured it out, by reviewing the code. Thanks for the help sobadrdb.
no problem,
sometimes we done typo,
i found it with the codepen analyze html tool.
i used to do that before going to validate with w3c validator.
and you can use the codepen to analyze the css too.