HTML5 Form Validation
Tags: html, beginners
Published: 2020-05-11 04:00:33

###Song of the Week
{% soundcloud https://soundcloud.com/mishabeatsyou/misha-evil-needle-dreams %}
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:
```html
<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:
```html
<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:
```html
<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:
```html
<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.
{% codepen https://codepen.io/lofiandcode/pen/dyYeaaP %}

##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.

##References
[Cover Image](https://www.cerner.com/ae/en/blog/alert-fatigue-the-cause-and-effect)
[HTML Input Attributes - w3schools.com](https://www.w3schools.com/html/html_form_attributes.asp)
[Airport Survey Form - codepen/lofiandcode](https://codepen.io/lofiandcode/pen/dyYeaaP)