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 functionality results in an accessible and user-friendly experience.

Almost everything I do in this article is replaceable. In other words, its purpose is to put in some mechanism to perform the validation. It’s not a template. Validation should occur at the client AND server-side level in order to prevent data corruption, unhandled errors, and security violations.

Also, as I stated in the first article, I will not be using any third-party libraries, including jQuery. It’s just vanilla JavaScript.

The final product is, for the most part, a “happy path” implementation.

Preventing default behavior

Because we’re using native HTML attributes, such as required on our input controls, we need to prevent the default HTML behavior that will validate the form.