Extensibility Pattern

While some validators require specific props to function, it is common for validators to accept arbitrary validator props on return them on validation results. This provides opportunities for applications to have very rich user experiences.
Consider the following implementation of our letter validator.
1
function letterValidator(validatorProps) {
2
    return function validateLetter(value, context) {
3
        // Be sure not to overwrite the original
4
        // validatorProps variable (which would affect
5
        // repeated validation calls)
6
        let resolvedProps = validatorProps;
7
​
8
        if (typeof resolvedProps === 'function') {
9
            resolvedProps = resolvedProps(context);
10
        }
11
​
12
        resolvedProps = resolvedProps || {};
13
​
14
        const {letter} = resolvedProps;
15
​
16
        return {
17
            message: `Must match "${letter}"`,
18
            ...resolvedProps,
19
            isValid: (value === letter)
20
        };
21
    }
22
}
Copied!
With this approach, the validator can define a default message but allow the message to be overridden by validator props supplied to the factory. The resolved letter prop is also echoed in the validation result. Plus, arbitrary properties flow through the factory to the validation result. This approach can unlock many scenarios where applications need to enrich the validation results.
Note that the isValid result property should be applied after spreading the validator props. This guards against an application inadvertently passing isValid and overriding the actual validation results.
Let's see how an application could pass more context through to the letter validator to get rich validation results.
1
import validate from 'strickland';
2
​
3
const termsAccepted = letterValidator({
4
    letter: 'Y',
5
    fieldName: 'acceptTerms',
6
    message: 'Enter the letter "Y" to accept the terms'
7
});
8
​
9
const termsEntered = 'N';
10
​
11
const result = validate(termsAccepted, termsEntered);
12
​
13
/*
14
    result = {
15
        letter: 'Y',
16
        fieldName: 'acceptTerms',
17
        message: 'Enter the letter "Y" to accept the terms',
18
        isValid: false,
19
        value: 'N'
20
    }
21
 */
Copied!

Validation Result Props

formatResult

Last modified 1yr ago

Copy link