Learn

In the previous exercise, we were able to use min and max to set acceptable minimum and maximum values in a number field. But what about text fields? There are certainly cases where we wouldn’t want our users typing more than a certain number of characters (think about the character cap for messages on Twitter). We might even want to set a minimum number of characters. Conveniently, there are built-in HTML5 validations for these situations.

To set a minimum number of characters for a text field, we add the minlength attribute and a value to set a minimum value. Similarly, to set the maximum number of characters for a text field, we use the maxlength attribute and set a maximum value. Let’s take a look at these attributes in code:

<form action="/example.html" method="POST">
  <label for="summary">Summarize your feelings in less than 250 characters</label>
  <input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
  <input type="submit" value="Submit">
</form>

If a user tries to submit the <form> with less than the set minimum, this message appears:

prompt on a number field for user to length the input

And if a user tries to type in more than the maximum allowed number of characters, they don’t get a warning message, but they can’t type it in!

Let’s add this validation to our <form>.

Instructions

For the login <form>, we want our users to have usernames that are at least 3 characters and at most 15. Let’s add this validation to our current <form>.

To the <input> with an id of "username", add the following attributes and values:

a minlength of "3"
a maxlength of "15"

We also want passwords to have at least 8 characters and at most 15.

So, in the opening <input> tag that has an id of "pw", add:

a minlength of "8"
a maxlength of "15"

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?