Accessible form validation from scratch — JavaScript

Part 5: Performing validation

Photo by Karol Chomka on Unsplash

This is the fifth and final article in my “Accessible form validation from scratch” series.

Contents

• Introduction
• Preventing default behavior
• Validation for first attempt
• Validation for blur events
• The final solution
• Conclusion
• Links

Introduction

Here are the previous articles:

• Part 1: Requirements
• Part 2: Markup
• Part 3: Preparing for validation
• Part 4: Styling

In this article, I’ll implement the JavaScript, which will perform the validation.

My goal has always been to offload as much as possible to CSS, which I believe I have. The JavaScript will validate the user’s input and inform the user what needs correcting.

A note on JavaScript

The JavaScript in this article will be sloppy. It doesn’t really matter. I’m not trying to be super tidy with it. How I validate the data isn’t as important as ensuring the validation…