Form Validation

(This post first appeared on my personal blog)

Forms facilitate communication and transactions between users around the globe, from a contact form on a blog to the transfer of money
through your online bank or your favorite e-commerce platform, forms are a necessary part of every user's experience of the web.
It should go without saying then that a great, accessible form can make a world of difference in providing a pleasant user experience. I'm sure most people have experienced the frustration around trying to fill out a form with obscure error messages that prevent you from completing your task. As developers, it is our responsibility to provide an accessible experience that allows a user to complete their task without any friction.

If you are using a JavaScript framework to build and manage forms, you are probably aware that many libraries exist within the JavaScript ecosystem to help solve some of the problems associated with forms (some notable examples include: formik and react hook forms). However, you might not always need a JavaScript framework to solve this problem (especially if your form isn't very complex), so it is important to understand the best practices around creating a form.

Let's begin this journey with an essential part of every form: validation. The simplest way to add validation to an input field is by adding the required attribute to the field. If a user attempts to submit a form without filling out a required field, a message provided by the browser will notify the user to fill out the field. If the input doesn't have a value, the :invalid psuedo-class will be assigned to that input which can then be styled. Click on the submit button in the example below to see the default error message applied by the browser.

One of the things I was surprised to learn about when researching form validation is the number of attributes provided by HTML to aid in the validation process. A prime example of such an attribute is the pattern attribute. The pattern attribute allows you to define a regular expression to validate the given input against. So for example, if you create a form with a beverage field and you wanted to restrict the answer to coffee, you could write the following regex pattern coffee to prevent the user from submitting the form unless that regex pattern is satisfied.

Although the pattern above would mostly serve the purpose of frustrating a user, it is not too difficult to think of a better use case for the pattern attribute,for example validating a phone number. Another helpful tip I picked up in my research into the pattern attribute: if the input type is email,then that field is validated against an email address pattern without any extra configuration! Don't believe me? Go back to the first codepen example, enter a value that isn't an email address and report back on the results. Other validation attributes exist, such as minlength and maxlength (useful for specifying a minimum length for a password) but I will leave it as an exercise for the reader to explore some of these other validation attributes.

A great resource for discovering other validation attributes is MDN, specifically this article on Client-side form validation. Let me know if you have any questions or wish to point out anything that I failed to mention in this brief overview. In my next post, I will look into adding some more custom error messages using JavaScript.