How to handle validations involving several fields?

13 Sep 2017

How to handle validations involving several fields?

It’s often enough to validate each field in isolation:

But every once in a while, you need to validate several fields together:

It’s hard or impossible implement that with field-level validations without unnecessarily complicating the code. However, with a simple validation architecture from the other articles, it’s pretty trivial.

A function that validates the entire form is simple:

function validate(email, password) {
  // true means invalid, so our conditions got reversed
  return {
    email: email.length === 0,
    password: password.length === 0
  };
}

I mean, what could be simpler? And yet, it’s very powerful. Validating several fields together is easily achievable:

function validate(email, password, passwordConfirm) {
  // true means invalid, so our conditions got reversed
  return {
    email: email.length === 0,
    password: password.length === 0,
    passwordConfirm: password !== passwordConfirm
  };
}

Try entering different passwords now:

Once again, controlled inputs saved our day 🐶

Think your friends would dig this article, too?

Google+
Tumblr
If you need a mobile app built for your business or your idea, there's a chance I could help you with that.
Leave your email here and I will get back to you shortly.