You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: lib/components_guide_web/templates/react_typescript/form-reducers.html.md
+5-4Lines changed: 5 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,22 +8,23 @@ Fortunately the browser has two features to help us out: `FormData` and event de
8
8
9
9
## Thinking of validation as a linear process
10
10
11
-
We can think of validation as mapping from events to errors.
11
+
We can think of validation as mapping from _events_ to _errors_.
12
12
13
13
We have two events: `blur` and `submit`.
14
14
15
-
When a field is blurred, we validate whether its value is valid or not.
15
+
When a field is blurred, we validate whether its value is valid or not. This produces either one or no error.
16
16
17
-
When a whole form is submitted, we validate **all** of its fields at once.
17
+
When a whole form is submitted, we validate **all** of its fields at once. This produces zero or more errors.
18
18
19
19
It would be great to write the same code to validate either a single field (when it is blurred) or a whole bunch of fields (when their form is submitted).
20
20
21
21
If we were to sketch out the steps it would look like:
22
22
23
23
1. Get the field(s) matching this event.
24
-
2. Get the values from the fields.
24
+
2. Get the values from the field(s).
25
25
3. Validate each value.
26
26
4. Store a key-value map for each error, with the key identifying the field, and the value holding the error message.
27
+
5. Render out each field, with its error alongside.
0 commit comments