Performing 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 number must contain only numbers, spaces, and any of the following: + - ( ) .'
  }
}