Validating text by length

One of the most basic checks at the client side is the length of the text being inserted or submitted with the form. This is often left out, but it is one of the checks that must be done and not just at the client side. Imagine if we had no restriction on any of our inputs, a few large texts could overload the server without making much effort.

How to do it...

Let's create a simple HTML form that will contain a few different inputs on which we will apply some constrains:

1. Head of the page is a standard one, so we will directly go into creating the form, first adding the name input limited to 20 characters as follows:

   <form>
       <div>
         <label>
           Name <input id="name" type="text" name="name" maxlength="20" title="Text is limited to 20 chars"placeholder="Firstname Lastname" >
         </label>
       </div>

2. After that we will add another input field that initially has an invalid value, longer than the one specified for testing purpose...