Validating numbers by range

When it comes down to numbers in forms, the basic validation is to check if the number is in a given range. For achieving this, there are the min and max attributes that should be applied to input types number, range, and date/time related inputs.

How to do it...

We will create a form containing a few input elements that need to have a range restriction, as follows:

1. First of all, we will start by creating the form with a number input field for age, limiting it to minimum of 18, as given in the following code snippet:

   <form>
     <div>
       <label>
         Age <input id="age" type="number" name="name" min="18" max="140" />
       </label>
     </div>

2. We will add the range input for the Bet value the user would place as follows:

     <div>
       <label>
         Bet <input id="deposit" value="1000" type="range" name="deposit" min="0" max="2000" />
          <output id="depositDisplay">1000</output>
       </label>
     </div...