Strickland
Search…
form
The form validator performs both field-level and form-level validation. Field validators are supplied the same way objectProps validators are supplied as an object with the shape matching the form fields. The form validator also allows previous validation results to be provided on context so that results can be updated with the new results merged in.

Parameters

The first parameter to the form validator factory is an object defining the properties to be validated on objects. Validator props can also be supplied either as an object or as a function that accepts context and returns a validator props object.

Validation Context

The form validator utilizes validation context to perform field-level validation as well as to update previous validation results. Without any context provided, the entire form will be validated without using any previous validation results.

Field-Level Validation: form.fields

The form.fields context prop indicates which field(s) to validate.
  • If form.fields is an array of strings, all items are treated as field names
  • If form.fields is not supplied, all fields are validated
  • If form.fields is an empty array, no fields are validated
In all cases, the rest of the form validation results will be refreshed, including the validationErrors array and the possible validateAsync function that captures remaining async validation.

Previous Validation Results: form.validationResults

Validation results from earlier validation can be supplied using form.validationResults. These existing results will be retained, but any fields that are re-validated will be overwritten with their new results.

Result Properties

  • form.validationResults: An object with properties matching those validated, with the values of the properties representing the validation results. If the form.validationResults and form.fields context props were used, then previous validation results that were not re-validated will be retained.
  • form.validationErrors: An array of validation results that are invalid, but excluding results where async validation remains to be completed.
  • form.isComplete: A boolean indicating whether the entire form has been validated. true when form.validationResults contains results for all field validators and none of those results has a validateAsync yet to be resolved.

Usage

The sample code below demonstrates validating a form with field-level validation, incrementally building up validation results.
1
import validate, {
2
form, required, length, range
3
} from 'strickland';
4
5
const personValidator = form({
6
firstName: [
7
required(),
8
length(2, 20)
9
],
10
lastName: [
11
required(),
12
length(2, 20)
13
],
14
birthYear: range(1900, 2018)
15
});
16
17
// Initialize the person with only a firstName
18
let person = {
19
firstName: 'Stanford'
20
};
21
22
// Validate the firstName field
23
let result = validate(personValidator, person, {
24
form: {
25
fields: ['firstName']
26
}
27
});
28
29
/*
30
result = {
31
isValid: false,
32
value: {
33
firstName: 'Stanford'
34
},
35
form: {
36
isComplete: false,
37
validationResults: {
38
firstName: {
39
isValid: true,
40
value: 'Stanford',
41
required: true,
42
minLength: 2,
43
maxLength: 20
44
}
45
},
46
validationErrors: []
47
}
48
}
49
*/
50
51
// Add the lastName field
52
person = {
53
firstName: 'Stanford',
54
lastName: 'Strickland'
55
};
56
57
// Validate the lastName field, build on
58
// previous form validation results
59
result = validate(personValidator, person, {
60
form: {
61
...result.form,
62
fields: ['lastName']
63
}
64
});
65
66
/*
67
result = {
68
isValid: false,
69
value: {
70
firstName: 'Stanford',
71
lastName: 'Strickland'
72
},
73
form: {
74
isComplete: false,
75
validationResults: {
76
firstName: {
77
isValid: true,
78
value: 'Stanford',
79
required: true,
80
minLength: 2,
81
maxLength: 20
82
},
83
lastName: {
84
isValid: true,
85
value: 'Strickland',
86
required: true,
87
minLength: 2,
88
maxLength: 20
89
}
90
},
91
validationErrors: []
92
}
93
}
94
*/
95
96
// Add a birthYear (that is invalid)
97
person = {
98
...person,
99
birthYear: 2020
100
};
101
102
// Validate the birthYear field
103
result = validate(personValidator, person, {
104
form: {
105
...result.form,
106
fields: ['birthYear']
107
}
108
});
109
110
/*
111
result = {
112
isValid: false,
113
value: {
114
firstName: 'Stanford',
115
lastName: 'Strickland'
116
},
117
form: {
118
isComplete: true,
119
validationResults: {
120
firstName: {
121
isValid: true,
122
value: 'Stanford',
123
required: true,
124
minLength: 2,
125
maxLength: 20
126
},
127
lastName: {
128
isValid: true,
129
value: 'Strickland',
130
required: true,
131
minLength: 2,
132
maxLength: 20
133
},
134
birthYear: {
135
isValid: false,
136
value: 2020,
137
min: 1900,
138
max: 2018
139
}
140
},
141
validationErrors: [
142
{
143
fieldName: 'birthYear',
144
isValid: false,
145
value: 2020,
146
min: 1900,
147
max: 2018
148
}
149
]
150
}
151
}
152
*/
153
154
// Revalidate the entire form, passing
155
// previous validation results in
156
result = validate(personValidator, person, result);
Copied!
Last modified 1yr ago