Introducing calidation 🌶

Although form validation is boring af, it’s also one of the most important improvements to your user experience. Get ready to be mildly impressed!

Image for post
Image for post
Get it? Because calidation is a pun on californication by… Red Hot Chili Peppers. Photo by Ricardo Gomez Angel on Unsplash

The problem

Validating forms shouldn’t be so rough. It’s something almost every website should be doing. Sure, you have those nice HTML5 input types now, and a flag, but that doesn’t get you far when you have design and business requirements to deal with.

As with most hard problems, there has been a lot of attempts by the community to solve this. Most notably is the project, which places all of your form state in a Redux reducer, and passes you all the form values on submit. It works well for its intended purpose — but it still leaves you implementing the actual validation.

There are tons of great validation libraries out there too. My favorite for a long time was You pass some input, and you get a boolean back indicating whether or not the value is valid according to the given validator.

The problem with this approach is that you’re still left implementing a lot of logic! You have to create some kind of way to show error messages, support live validation, multiple validation rules per field and compound validation that depends on other fields.

Relax buddy, I got you.

Image for post
Image for post
I’m really gonna drive this point home. Chili peppers. Because cali. It’s a reference. Photo by Colin McMurry on Unsplash

The solution

I — much like yourself — have squabbled with this challenge quite a few times, and I think I’ve created something that solves all of the issues I’ve come across with form validation in React. I named it , because it provides you with red hot form validation peppers for React. 🌶

You specify the names of the fields you want to use, the validators you want to run and the error messages you want to show the user if the input fails its validation. You then replace your crusty old tag with a fancy new component, pass in your configuration object and a few other props (like an handler), and lean back.

In order to provide you — the consumer — with the ultimate amount of flexibility, uses a render prop to pass you the validation results. That means it’s still up to you to show error messages, control components and whatever else you want to do with the result.

Here’s a complete, working example:

Notice that the inputs aren’t controlled? That’s right! The component uses event bubbling to capture any events below it, and runs any validation logic every time.

Live validation by default!

Running the validation logic on every change event continuously, means you’ll always have up-to-date validation results — or what we often call “live validation”. It’s typically what you encounter after you’ve submitted a form, gotten some errors and see your error message instantly disappear whenever you correct your error.

Showing errors all the time, even before the user has started typing, is not a good user experience. Luckily, you’re in charge of what to render — so you can choose to only show those errors after the form has been submitted.

This way, the errors won’t show up until you submit it! Perfect 👊

Image for post
Image for post
calidation calidation calidation!

Validators validators validators!

comes pre-packaged with its own set of validators — aptly named (I was on a roll). It doesn’t contain much, but enough to deal with most of your validation needs.

I made small on purpose — there is no way I could ever cover all validation needs. What about social security numbers, Norwegian mobile phone numbers or HSLA color codes?

That’s why is extendable with all the validators you want. Wrap your application in a component, and pass in all your custom magic there. Refer to the docs on how to write them.

Image for post
Image for post
“Dreaming of calidation at a street market” by Peter Hershey on Unsplash

Compound forms

Sometimes, this approach with all input fields inside the same form is a bit of a pain. Perhaps your form is just too big or complicated? Perhaps there are several steps, and each step depends on previous ones? I’ve come across this too, and this is where this library (in my humble, very objective opinion) really shines.

Instead of having a single component, we split up the form itself and each subset of validation into two components — and .

The component accepts an handler, which receives the compound set of input values from all components. The components each get their piece of the object that’s relevant to them.

These components can be anywhere, as long as they are descendants of the — so you don’t have to do a ton of prop drilling to pass stuff down.

Here’s a bit more complex example with two sub forms:

Try it out!

If you’re dealing with form validation in React, give this a try and tell me what you think. It’s free, open source and just waiting for you to npm install it.

Thanks for your time! And as always, a clap or 20 is always appreciated!

Written by

React Lead at Bekk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store