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

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

Related explainers

typescript

import {
  CallHandler,
  ExecutionContext,
  Injectable,

Wrapping responses in a NestJS interceptor

interceptors rxjs response-shaping

Intermediate 7 steps

typescript

type RetryOptions = {
  retries?: number;
  timeoutMs?: number;
  baseDelayMs?: number;

Retry with timeout and backoff in TypeScript

promises retry exponential-backoff

Intermediate 10 steps

typescript

import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers

Advanced 10 steps

typescript

const DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
  { amount: 60, unit: "seconds" },
  { amount: 60, unit: "minutes" },
  { amount: 24, unit: "hours" },

Human-readable relative times with Intl

internationalization date-formatting lookup-table

Intermediate 7 steps

java

@Target({ElementType.FIELD, ElementType.PARAMETER})
@Retention(RetentionPolicy.RUNTIME)
@Constraint(validatedBy = StrongPasswordValidator.class)
@Documented

Building a custom @StrongPassword validator in Spring

bean-validation annotations regex

Intermediate 7 steps

typescript

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { AsyncPipe } from '@angular/common';