typescript 49 lines · 9 steps

How a typed signup validator collects errors

A single function checks every signup field and returns a typed map of field-specific error messages.

Explained by highlit
Intermediate form-validation type-safety regex mapped-types
1type SignupInput = {
2 email: string;
3 password: string;
4 confirmPassword: string;
5 username: string;
6 age: string;
7};
8 
9type FieldErrors = Partial<Record<keyof SignupInput, string>>;
10 
11const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
12const USERNAME_RE = /^[a-zA-Z0-9_]+$/;
13 
14export function validateSignup(input: SignupInput): FieldErrors {
15 const errors: FieldErrors = {};
16 
17 const email = input.email.trim();
18 if (!email) {
19 errors.email = "Email is required";
20 } else if (!EMAIL_RE.test(email)) {
21 errors.email = "Enter a valid email address";
22 }
23 
24 if (!input.password) {
25 errors.password = "Password is required";
26 } else if (input.password.length < 8) {
27 errors.password = "Password must be at least 8 characters";
28 } else if (!/[0-9]/.test(input.password) || !/[a-zA-Z]/.test(input.password)) {
29 errors.password = "Password must contain letters and numbers";
30 }
31 
32 if (input.confirmPassword !== input.password) {
33 errors.confirmPassword = "Passwords do not match";
34 }
35 
36 const username = input.username.trim();
37 if (username.length < 3) {
38 errors.username = "Username must be at least 3 characters";
39 } else if (!USERNAME_RE.test(username)) {
40 errors.username = "Username may only contain letters, numbers, and underscores";
41 }
42 
43 const age = Number(input.age);
44 if (!Number.isInteger(age) || age < 13) {
45 errors.age = "You must be at least 13 years old";
46 }
47 
48 return errors;
49}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Deriving the error shape from the input type with keyof keeps validation in sync as fields change.
  2. 2Accumulating errors into one object lets you report every problem at once instead of failing on the first.
  3. 3Ordering checks from required to format avoids running stricter rules on missing or empty values.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
ruby 
class UserAgentParser
  BROWSERS = [
    [/Edg\/([\d.]+)/, "Edge"],
    [/OPR\/([\d.]+)/, "Opera"],

Parsing user-agent strings in Ruby

regex pattern-matching lookup-tables
Intermediate 8 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

How a typed signup validator collects errors — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code