Learn
Form Validation
Checking Text Length

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

1.

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"
2.

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"
Folder Icon

Take this course for free

Already have an account?