Two-Stage Sync/Async Validation

Search…
While validators can be executed asynchronously using validateAsync, there are scenarios where partial, synchronous results can be valuable in your applications. These scenarios can defer the asynchronous validation until the right time in the user's workflow, achieving two-stage sync/async validation.
We learned early on that validators can return either a boolean or a result object with the boolean as an isValid property. Async validators work similarly: to opt into async validation, validators can return any of the following:
A Promise that resolves to a validation result
A function that returns a validation result (including a Promise that resolves to a validation result)
A result object with a Promise on the validateAsync property
A result object with a validateAsync function
We also know that validators can include additional properties on their validation results; this is still true when one of those properties is validateAsync. Those additional properties will be available to the application synchronously, before resolving the asynchronous result.
Let's modify the usernameIsAvailable validator to make it return both a synchronous result and an asynchronous result.
1
function usernameIsAvailableTwoStage(username) {
2
    if (!username) {
3
        // Do not check availability of an empty username
4
​
5
        // Return just a boolean - it will be
6
        // converted to a valid result
7
        return true;
8
    }
9
​
10
    // Return an initial result indicating the value is
11
    // not (yet) valid, but availability will be checked
12
    return {
13
        isValid: false,
14
        message: `Checking availability of "${username}"...`,
15
        validateAsync() {
16
            return new Promise((resolve) => {
17
                if (username === 'marty') {
18
                    resolve({
19
                        isValid: false,
20
                        message: `"${username}" is not available`
21
                    });
22
                } else {
23
                    resolve({
24
                        isValid: true,
25
                        message: `"${username}" is available`
26
                    });
27
                }
28
            });
29
        }
30
    };
31
}
Copied!
This pattern makes it possible to perform two-stage validation where the first stage produces partial, synchronous validation and the second stage performs complete, asynchronous validation. Validators can even mark their initial results with isValid: true if synchronous validation should be treated as valid.
In the following example, the application will render the partial, synchronous validation results; resolve the asynchronous validation; and render the final result once complete.
1
import validate, {required, length} from 'strickland';
2
​
3
const userValidator = {
4
    name: [
5
        required(),
6
        length(2, 20)
7
    ],
8
    username: [
9
        required(),
10
        length(2, 20),
11
        usernameIsAvailableTwoStage
12
    ]
13
};
14
​
15
const user = {
16
    name: 'Marty McFly',
17
    username: 'marty'
18
};
19
​
20
const result = validate(userValidator, user);
21
​
22
/*
23
    result = {
24
        isValid: false,
25
        props: {
26
            name: {
27
                isValid: true,
28
                value: 'Marty McFly'
29
            },
30
            username: {
31
                isValid: false,
32
                value: 'marty',
33
                required: true,
34
                minLength: 2,
35
                maxLength: 20,
36
                message: 'Checking availability of "marty"...',
37
                validateAsync: [Function]
38
            }
39
        },
40
        validateAsync: [Function]
41
    }
42
 */
43
​
44
result.validateAsync().then((asyncResult) => {
45
/*
46
    asyncResult = {
47
        isValid: false,
48
        props: {
49
            name: {
50
                isValid: true,
51
                value: 'Marty McFly'
52
            },
53
            username: {
54
                isValid: false,
55
                value: 'marty',
56
                required: true,
57
                minLength: 2,
58
                maxLength: 20,
59
                message: '"marty" is not available'
60
            }
61
        }
62
    }
63
 */
64
});
Copied!
Async Validator Arrays and Objects
Race Conditions
Last modified 1yr ago
Copy link