Custom Validation

Start of documentation content

Allows custom validation rules in JavaScript with the onValidation prop.

Use of onValidation

import { Formally, getNodeByName } from 'formally';

<Formally
  onValidation={async ({
    values,
    errors: oldErrors,
    hasErrors: oldHasErrors,
    formallyData,
  }) => {
    const newErrors = oldErrors;
    let newHasErrors = oldHasErrors;
    // First get the Component (aka Node).
    // You can use the 'name' attribute as a selector
    const dobNode = getNodeByName(formallyData, 'dob');
    if (dobNode) {
      // Then get the value
      const dobValue = values[dobNode.id];
      if (typeof dobValue === 'string' && dobValue !== '') {
        // Apply custom validation
        if (!dobValue.match(/^\d\d\/\d\d\/\d\d\d\d$/)) {
          newErrors[dobNode.id] = {
            type: 'invalid',
            message: '',
          };
          newHasErrors = true;
        }
      }
    }
    return { errors: newErrors, hasErrors: newHasErrors };
  }}
/>;