Arguably, one of the most tedious tasks that comes with building pages – or just parts of pages – is form validation. And by that, I mean handling all information that users provide in a given form and making sure that it’s in the proper format and safe to write to a data store.

For the most part, we don’t build forms that freely accept any type of information. We’re usually looking for names, dates, addresses, phone numbers, and so on. Sometimes, we’re looking for more, like payment information, in the case of building an eCommerce site.

At this point, there are validation libraries in the majority of common programming languages. This means it’s pretty easy to hook up a library to our work, pipe the information through it, and then report any errors before actually submitting any information.

But in the context of web applications, good validation is usually two-fold:

  1. Client-side form validation
  2. Server-side form validation

Client Side Form Validation

Though client side form validation isn’t something that’s required, it definitely helps with the user experience. That is to say that we could accept all information, parse it on the server, save the data if it all checks out, or return errors if it fails.

But with JavaScript as prevalent as it is, it’s worth trying to give users as much feedback as quickly as possible so that when they submit the information, it’s already likely to pass server-side validation.

One aspect of validation, though, is formatting of the information. For example, consider the case of a phone number. There are a handful of ways that phone numbers can be formatted:

  • 10 digits (versus seven)
  • Area code with or without parentheses
  • Toll free numbers
  • With or without letters
  • ..and so on

Of course, there are other types of input – like dates – that also have a specific format. So when it comes to client side validation, it’s also nice when we’re able to enforce rules of formatting without the user having to guess what we want.

And that’s where Formance.js comes in really handy.

Formance for Client Side Validation

Formance for Client Side Validation

As the site says, Formance.js is:

A general purpose library for formatting and validating form fields, based on / inspired by Stripe’s jQuery.payment library.

Any developer who has worked with the Stripe API knows how nice their form validation, formatting, and feedback system is, so having a third-party library inspired by that is a plus.

Plus, Formance offers up a collection of fields that are common to North America. (You’ll likely notice that some of the examples above and in the documentation are specifically for Canadian provinces; however, there is US, Canadian, and some United Kingdom support.)

These include:

  • Dates
  • Phone numbers
  • Email addresses
  • Credit card information
  • …and more

In addition to making it easy to introduce validation into the existing project, it also makes it easy to introduce automated formatting. For example, if a user is providing a phone number, then Formance will format the input so that it matches a specified format – such as (000)-123-1234 – while the user is entering data.

Generally speaking, it’s a great library that’s easy to hook up, handles common form validation functions, and also handles data formatting.

Keep Your Options Open

Sure, like anyone else, I’ve used a number of different JavaScript libraries and will likely continue to evaluate new options that come available, but I’ve really enjoyed using this particular library in recent projects.

So, for now, having a single library that automatically handles form validation and formatting is really nice and this is one that I recommend.

Category:
Resources

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.