Min and max attributes for building a survey form

For this User Story, I need to do the following User Story #9: If I enter numbers outside the range of the number input, which is defined by the min and max attributes, I will see an HTML5 validation error. User Story #9:
Can anyone help me I’m not sure what they want in min and max, and how to make those attributes?

Survey Form

1 Like

By adding min/max attributes to your input you limit the user’s input between those specified values.

This is your input label:

Enter how much you enjoyed our programs from the scale of 0-10

So, you don’t want the user to enter say 12, that’s the reason to specify min/max values

You’ve added the min/max attributes on the submit input, you need to move them to numbers input.

<input id="number" type="number" min="0" max="9">
1 Like

This user story asks you to just make use of HTML built-in validation. In this example, you have to define an accepted range using min i.e minimum and max for the maximum value.
If your min = 5 and max = 15, the user cannot enter 4 or 16 as they are out of the range.

1 Like

I did that, but it doesn’t do anything. For max, I put 5, yet it’s still possible to input numbers higher than 5.

Update the Codepen so we can see the code changes you made.

Just to note. The way the constraint validation works is not by stoping the user from entering in a number using the keyboard. The widget control (up/down arrows) will not let the user start or go beyond the min/max. If the user manually enters a invalid number then when submitting the form the user will get a validation error saying something like “Value must be greater than or equal to”.

1 Like

I added a min and max attribute to id="number". I put min="1" and max="10", but for some reason I can input smaller and larger numbers, then defined with min and max attributes. I am not doing them right? Also do I need JS for this project?

I found out that if the up and down errors are used the min and max attributes work, but not if someone types in the numbers. Is it suppose to be like that?

Did you read what I wrote?

Yes. Thanks I’m doing the next User Story.

No problem, happy coding!

1 Like

Create horizontal forms with the grid by adding the .row class to form groups

I am in the project now but i always had a problem