Mastering React Test-Driven Development

Performing client-side validation

The Git tag for this section is client-side-validation.

As our users fill out our forms, we want to alert them to any issues as soon as possible. We'll alert the user to any validation issues once the focus is no longer on the text field, using the blur event.

We will represent validation errors as strings within a validationErrors object that's stored as component state. We can use this object to help us validate each field within the form. Each field has a key in the object. An undefined value (or absence of a value) represents no validation error, and a string value represents an error. Here's an example:

{  validationErrors: {    firstName: 'First name is required',    lastName: undefined, phoneNumber: 'Phone ...