HTML5 Form Validation

#html #beginners

Song of the Week

This week I've been learning about all the different input tag types and attributes in HTML5, and I discovered that HTML5 has some built in form validation. That means you can produce warning messages to notify the user of an invalid entry, all without any JavaScript.

Let's go over four the input tag attributes that I felt were some of the most useful when implementing form validation. Then at the end, you can see how all these attributes work in the embedded CodePen.

Required

The most basic and widely applicable form validation attribute is required. By simply adding this attribute to the input tag, HTML5 will generate an alert message if the user tries to submit that form without entering a value in that field. Here's an example:

<form>
  <label for='name-field'>Name:</label><br>
  <input type='text' id='name-field' required/><br>
  <button type="submit">Submit</button>
</form>

Min and Max

The min and max attribute allow you to define a range of valid entries to the following input tag types: number, range, date, datetime-local, month, time and week. This can be very useful if you want the user to enter a rating from 1-10, or to choose a day after a certain date. Here's an example:

<form>
  <label for='rate-field'>Rating(1-10):</label><br>
  <input type='number' id='rate-field' min='1' max='10' required/><br>
  <button type="submit">Submit</button>
</form>

Step

The step attribute sets an amount by which the value in the field can increase or decrease. So for example, if the input tag is a number type and step equals 5, then the number entered much be divisible by 5. The step attribute works with all of the following input tag types: number, range, date, datetime-local, month, time and week. Here's an example:

<form>
  <label for='donation-field'>
    Would you like to donate to charity?<br>
    Enter a dollar amount in multiples of $5:
  </label><br>
  <input type='number' id='donation-field' step='5'/><br>
  <button type="submit">Submit</button>
</form>

Pattern

The pattern attribute allows you to use a regular expressions to validate the input. This makes pattern extremely powerful and allows you to customize the input requirements to that input's specific needs. This could be useful if the input was for 3 letter airport codes or license plate numbers. The pattern attribute can be used with the following input tag types: text, date, search, url, tel, email, and password. Here's an example:

<form>
  <label for='airport-field'>Airport Code:</label><br>
  <input 
    type='text' 
    id='airport-field' 
    pattern=[A-Z]{3} 
    placeholder='Enter the 3 capitolized letter code.' 
    required
  /><br>
  <button type="submit">Submit</button>
</form>

Interactive Example

To give you a chance to see all these in action I created a simple Airport survey that a hypothetical passenger might fill out. As you try entering invalid values in each field, be aware the HTML5 will always produce an alert on the first field in the form that has an invalid entry. So if you want to see the alerts for an input farther down, you need to enter valid entries in the input fields above.

Takeaways

The required attribute will require the user to entry a value in the field before the form can be submitted.
The min attribute sets a minimum value that is valid for the input field.
The max attribute sets a maximum value that is valid for the input field.
The step attribute sets an amount by which the value in the field can increase or decrease.
The pattern attribute allows you to use a regular expressions to validate the input.