javascript 39 lines · 7 steps

Building a signup validator in JavaScript

A single function checks each signup field and collects every problem into one errors object.

Explained by highlit
Beginner validation regex guard-clauses form-handling
1function validateSignup({ email, password, confirmPassword, username, age }) {
2 const errors = {};
3 
4 if (!email) {
5 errors.email = 'Email is required';
6 } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
7 errors.email = 'Enter a valid email address';
8 }
9 
10 if (!username) {
11 errors.username = 'Username is required';
12 } else if (username.length < 3) {
13 errors.username = 'Username must be at least 3 characters';
14 } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
15 errors.username = 'Username may only contain letters, numbers, and underscores';
16 }
17 
18 if (!password) {
19 errors.password = 'Password is required';
20 } else if (password.length < 8) {
21 errors.password = 'Password must be at least 8 characters';
22 } else if (!/[0-9]/.test(password) || !/[a-zA-Z]/.test(password)) {
23 errors.password = 'Password must include letters and numbers';
24 }
25 
26 if (confirmPassword !== password) {
27 errors.confirmPassword = 'Passwords do not match';
28 }
29 
30 const parsedAge = Number(age);
31 if (!Number.isInteger(parsedAge) || parsedAge < 13) {
32 errors.age = 'You must be at least 13 years old';
33 }
34 
35 return {
36 valid: Object.keys(errors).length === 0,
37 errors,
38 };
39}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Accumulating all failures into one object gives users every error at once instead of one at a time.
  2. 2Ordering checks from presence to format lets each branch assume the field exists.
  3. 3Returning both a boolean and the details keeps the caller's control flow simple while preserving specifics.

Related explainers

php 
<?php
 
namespace App\Http\Controllers\Auth;
 

Rate-limited login in Laravel

authentication rate-limiting validation
Intermediate 9 steps
ruby 
class EmailValidator < ActiveModel::EachValidator
  EMAIL_FORMAT = /\A[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}\z/i
 
  def validate_each(record, attribute, value)

Writing a custom email validator in Rails

validation regex custom validators
Intermediate 7 steps
javascript 
const { validationResult, matchedData } = require('express-validator');
 
function validate(schema) {
  const runners = schema.map((rule) => rule.run.bind(rule));

A reusable validation middleware in Express

middleware validation higher-order-functions
Intermediate 8 steps
python 
import re
 
_UNIT_SECONDS = {
    "w": 604800,

Parsing duration strings like 1h30m in Python

regex parsing validation
Intermediate 8 steps
javascript 
const STORAGE_KEY = "app_state";
const CURRENT_VERSION = 3;
 
const migrations = {

Versioned state migrations in localStorage

migrations persistence versioning
Intermediate 9 steps
java 
@RestController
@RequestMapping("/api/users")
public class UserController {
 

Bean Validation in a Spring REST controller

validation rest-api exception-handling
Intermediate 9 steps

Share this explainer

Here's the card — post it anywhere.

Building a signup validator in JavaScript — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code