Layout and Validation

<form>
  <Typography variant="h2">Contact Information</Typography>
  <Grid container spacing={3} margin={{ top: 3, bottom: 3 }}>
    <Grid item sm={6}>
      <TextField variant="outlined" fullWidth id="first-name" label="First Name" />
    </Grid>
    <Grid item sm={6}>
      <TextField variant="outlined" fullWidth id="last-name" label="Last Name" />
    </Grid>
  </Grid>
  <FormControl component="fieldset">
    <Typography variant="h3" component="legend" gutterBottom>
      Address
    </Typography>
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <TextField
          variant="outlined"
          fullWidth
          id="street-address"
          label="Street Address"
          inputProps={{ 'aria-describedby': 'street-address-helper-text' }}
        />
        <FormHelperText id="street-address-helper-text">Ex. 123 Sesame Street</FormHelperText>
      </Grid>
      <Grid item sm={4}>
        <TextField variant="outlined" fullWidth id="city" label="City" />
      </Grid>
      <Grid item sm={4}>
        <TextField variant="outlined" fullWidth id="state" label="State" />
      </Grid>
      <Grid item sm={4}>
        <TextField variant="outlined" id="zip" label="Zip" />
      </Grid>
    </Grid>
  </FormControl>
  <Button type="submit" margin={{ top: 6 }}>
    Submit
  </Button>
</form>

() => {
  // Tracks value of the fields
  const [values, setValues] = React.useState({
    username: '',
    password: '',
  });
  // Tracks boolean error state of each field
  const [errors, setErrors] = React.useState({
    username: false,
    password: false,
  });
  // Tracks a list of links to fields with errors
  const [errorList, setErrorList] = React.useState([]);

  const [showPassword, setPasswordVisibility] = React.useState(false);
  const [showNotification, notificationVisibility] = React.useState(false);

  const notification = React.createRef();

  const handleChange = (e, name) => {
    const { value } = e.target;

    setValues({ ...values, [name]: value });

    // Clear error state for field if has value
    if (value) {
      setErrors({ ...errors, [name]: false });
    } else {
      // Field has been touched, so re-trigger error
      setErrors({ ...errors, [name]: true });
    }
  };

  const handleValidation = (e, name) => {
    const { value } = e.target;

    // Set error state for field if no value
    if (!value) {
      setErrors({ ...errors, [name]: true });
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const hasErrors = Object.values(errors).filter((i) => i).length;
    const hasValues = Object.values(values).filter((i) => i.length).length;

    // FIX issue with clicking from an empty field into submit b/c onBlur triggered simultaneously to clicking button

    // If pre-detected errors, or fields with no values,
    // trigger error Notification
    if (hasErrors || !hasValues) {
      // Ensure error state and error message for
      // empty fields
      Object.keys(values).map((i) => {
        if (!values[i].length) {
          errors[i] = true;
        }
      });

      let errorListItems = [];
      for (const error in errors) {
        if (errors[error]) {
          const label = document.querySelector(`#${error}-label`).textContent.replace('*', '');
          errorListItems = [
            ...errorListItems,
            <li key={error}>
              <Link href={`#${error}`} color="error" underline="always">
                Provide a value for "{label}"
              </Link>
            </li>,
          ];
        }
      }

      setErrorList(errorListItems);
      notificationVisibility(true);
      focusNotification();
    } else {
      // All valid? Remove Notification
      notificationVisibility(false);
    }
  };

  const focusNotification = () => {
    // Move focus to Notification if visible
    if (notification.current) {
      notification.current.focus();
    }
  };

  return (
    <Grid container justify="center">
      <Grid container item md={10} lg={8}>
        <Notification
          icon={<Error />}
          iconLabel="Error"
          type="error"
          enableTransition
          visible={showNotification}
          margin={{ bottom: 3 }}
          ref={notification}
        >
          <Typography>
            It looks like you may have some missing information.
            {errorList && (
              <ul style={{ margin: '.5rem 0 0', paddingLeft: '1.25rem' }}>
                {errorList.map((error) => error)}
              </ul>
            )}
          </Typography>
        </Notification>
        <form>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                fullWidth
                required
                id="username"
                label="Username"
                helperText={errors['username'] && 'Enter your username'}
                error={errors['username']}
                value={values['username']}
                onChange={(event) => handleChange(event, 'username')}
                onBlur={(event) => handleValidation(event, 'username')}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                fullWidth
                required
                id="password"
                label="Password"
                helperText={errors['password'] && 'Enter your password'}
                error={errors['password']}
                value={values['password']}
                type={showPassword ? 'text' : 'password'}
                onChange={(event) => handleChange(event, 'password')}
                onBlur={(event) => handleValidation(event, 'password')}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        aria-label="Toggle password visibility"
                        aria-pressed={showPassword}
                        onClick={() => setPasswordVisibility(!showPassword)}
                      >
                        {showPassword ? <Visibility /> : <VisibilityOff />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
            </Grid>
            <Grid item xs="auto">
              <Button type="submit" onClick={handleSubmit}>
                Log In
              </Button>
            </Grid>
          </Grid>
        </form>
      </Grid>
    </Grid>
  );
};