javascript 65 lines · 10 steps

Building a validated signup form in React

A controlled React form that validates on blur and submit, showing errors only for fields the user has touched.

Explained by highlit

React Intermediate form-validation controlled-components state-management accessibility

1import { useState } from "react";
2 
3const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
4 
5function validate({ email, password, confirm }) {
const errors = {};
if (!email.trim()) errors.email = "Email is required.";
else if (!EMAIL_RE.test(email)) errors.email = "Enter a valid email address.";
if (!password) errors.password = "Password is required.";
else if (password.length < 8) errors.password = "Must be at least 8 characters.";
if (confirm !== password) errors.confirm = "Passwords do not match.";
return errors;
13}
14 
15export default function SignupForm({ onSubmit }) {
const [values, setValues] = useState({ email: "", password: "", confirm: "" });
const [errors, setErrors] = useState({});
const [touched, setTouched] = useState({});
19 
const handleChange = (e) => {
  const { name, value } = e.target;
  setValues((prev) => ({ ...prev, [name]: value }));
};
24 
const handleBlur = (e) => {
  const { name } = e.target;
  setTouched((prev) => ({ ...prev, [name]: true }));
  setErrors(validate({ ...values }));
};
30 
const handleSubmit = (e) => {
  e.preventDefault();
  const nextErrors = validate(values);
  setErrors(nextErrors);
  setTouched({ email: true, password: true, confirm: true });
  if (Object.keys(nextErrors).length === 0) onSubmit(values);
};
38 
const fieldError = (name) => touched[name] && errors[name];
40 
return (
  <form onSubmit={handleSubmit} noValidate>
    {[
      { name: "email", label: "Email", type: "email" },
      { name: "password", label: "Password", type: "password" },
      { name: "confirm", label: "Confirm password", type: "password" },
    ].map(({ name, label, type }) => (
      <div key={name} className="field">
        <label htmlFor={name}>{label}</label>
        <input
          id={name}
          name={name}
          type={type}
          value={values[name]}
          onChange={handleChange}
          onBlur={handleBlur}
          aria-invalid={Boolean(fieldError(name))}
        />
        {fieldError(name) && <span className="error" role="alert">{errors[name]}</span>}
      </div>
    ))}
    <button type="submit">Create account</button>
  </form>
);
65}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Keeping validation in a pure function separate from the component makes rules easy to test and reuse.
2Tracking a 'touched' set lets you defer error messages until a field has actually been interacted with.
3Wiring aria-invalid and role='alert' turns visual validation into accessible feedback for free.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);