We are providing a quasi constructor function. All we need to do is pass in a branching function, telling createUserName how to handle each case.
Now that we have a better understanding of the benefits, let’s see how we might implement the createValidation function.

const createValidation = (fn, errorMsg, type) => data => {
  const result = fn(data);
  return {
    cata: branch =>
      result 
        ? branch.right(result, type) 
        : branch.left(errorMsg, type),
    type
  };
};

The function itself needs the validation function and optionally an error message and a type. The type might be useful if we want to distinguish between as well as do something depending on that type. Type can also be replaced with something else that might provide context. The actual implementation might vary, depending on the specific case, but the important aspect is that result is an object enabling user land to define how to handle the result outcome via the cata function.

Example: Form Validation

To see why this approach is useful, let’s take a look at form validating.
We might have a form, where we might provide a user name, a phone and an email address.

const EMAIL = “EMAIL”;
const PHONE = “PHONE”;

const createUserName = createValidation(
  a => a && a.length > 5, 
  “Minimum of 6 characters required”
);

const createEmail = createValidation(
  a => a && a.length > 6,
  “Minimum of 7 characters required”,
  EMAIL
);

const createPhone = createValidation(
  a => a && a.length > 7,
  “Minimum of 8 characters required”,
  PHONE
);

Ignore the naive validation functions, these depend on the specific case you’re trying to validate. But more interestingly we can map the results of a form to the different validation constructors.

const formValues = {
  email: createEmail(“foo@”),
  phone: createPhone(“987654321”),
  userName: createUserName(“UserA”)
};

What’s missing is a custom validation function, that expects the form values and returns an object that maps the field names to the result. The implementation is up to user land, but the following example should highlight the fact, that we can implement the mapping as needed.

const validateFormValues = values =>
  Object.keys(values).map(key => ({
    [key]: values[key].cata({
      left: e => e,
      right: a => a
    })
  })
);

Now we can call our newly created validateFormValues function with the form values and get back an array of objects containing a result for each field value.

const errors = validateFormValues(formValues);

The result will have the following structure:

[
  { email: “Minimum of 7 characters required” }, 
  { phone: true }, 
  { userName: “Minimum of 6 character required” }
]

The result can be a single object or an array of error messages etc. This depends on our specific case and can be implemented as needed via defining a specific mapping function.

Example: Safely Accessing Deeply Nested Data

We will take a look at one final example, just to clarify the benefits of this way of validating data. Our createValidation can be used to create a function that can safely access deeply nested data for example. There are better and more efficient ways to handle this, but it’s useful for demonstrating that we can use this approach in different situations.

const getValue = createValidation(a => {
  try {
    return a();
  } catch (e) {
    return false;
  }
});

const safelyAccessDeepNestedData = (data, defaultValue) => {
  return getValue(data).cata({
    left: () => defaultValue,
    right: a => a
  });
};

This enables us to access a deep nested value.

const a = 1;
const b = { c: { d: 2 } };

safelyAccessDeepNestedData(() => a.b.c); // => undefined
safelyAccessDeepNestedData(() => b.c.d); // => 2

Summary

This approach might be useful in situations where we want to control the outcome of the validation result. We might even use this function to validate data inside a React component f.e., either rendering an error message or nothing depending on the validation result.

If there is interest, there is a possibility of a follow-up to this write-up showing how to leverage these ideas directly in React f.e.

---

If you have any questions or feedback please leave a comment here or connect via Twitter: A. Sharif