Form Validation Patterns Cheat Sheet

Covers HTML5 constraint validation attributes, the Constraint Validation API, React Hook Form, common regex patterns, and accessible error messaging.

2 PagesIntermediateMar 8, 2026

HTML5 Validation Attributes

Native browser validation without any JavaScript.

required- Marks a field mandatory; blocks form submission until it has a value
pattern- Regex the value must match, e.g. pattern="[0-9]{5}" for a zip code
minlength / maxlength- Enforces character count bounds on text/textarea inputs
min / max- Enforces numeric or date range bounds on number/date/range inputs
type="email" / "url"- Built-in format validation for email addresses and URLs
step- Restricts numeric input to increments, e.g. step="0.01" for currency
novalidate- Form attribute that disables native browser validation entirely
:invalid / :valid- CSS pseudo-classes that match inputs based on current validity state

Constraint Validation API

Inspect and customize native validation from JavaScript.

javascript

const input = document.querySelector('#email');// Check validity without showing browser UIif (!input.checkValidity()) {  console.log(input.validationMessage);}// Trigger the browser's native validation bubbleinput.reportValidity();// Add a custom rule on top of the built-in type="email" checkinput.addEventListener('input', () => {  if (input.value.includes('+')) {    input.setCustomValidity('Plus signs are not allowed');  } else {    input.setCustomValidity(''); // must clear or the field stays invalid  }});// ValidityState flags you can branch oninput.validity.valueMissing;    // true if required and emptyinput.validity.typeMismatch;    // true if type="email" but malformedinput.validity.patternMismatch; // true if pattern doesn't matchinput.validity.tooShort;        // true if below minlength

React Hook Form

Schema-light form state and validation for React.

javascript

import { useForm } from 'react-hook-form';function SignupForm() {  const { register, handleSubmit, formState: { errors } } = useForm();  const onSubmit = (data) => console.log(data);  return (    <form onSubmit={handleSubmit(onSubmit)}>      <input        {...register('email', {          required: 'Email is required',          pattern: { value: /^\S+@\S+\.\S+$/, message: 'Invalid email' }        })}      />      {errors.email && <span role="alert">{errors.email.message}</span>}      <input        type="password"        {...register('password', { required: true, minLength: 8 })}      />      <button type="submit">Sign up</button>    </form>  );}

Common Regex Patterns

Battle-tested patterns for everyday field validation.

Email (simple)- /^[^\s@]+@[^\s@]+\.[^\s@]+$/ — good enough client-side, always re-check server-side
US phone- /^$?\d{3}$?[-.\s]?\d{3}[-.\s]?\d{4}$/ — matches (123) 456-7890 or 123-456-7890
URL- /^https?:\/\/\S+$/ — checks for a scheme, not that the host actually resolves
Strong password- /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/ — one lower, upper, digit, symbol, 8+ chars
US ZIP code- /^\d{5}(-\d{4})?$/ — matches 5-digit or ZIP+4 format

Accessible Error Messaging

Wire validation state to assistive technology correctly.

html

<label for="email">Email</label><input  id="email"  type="email"  aria-invalid="true"  aria-describedby="email-error"/><span id="email-error" role="alert">  Please enter a valid email address.</span>

Pro Tip

Never rely on client-side validation alone — it improves UX but can be bypassed entirely via DevTools or a direct API call, so always re-validate every field on the server before persisting it.

Was this cheat sheet helpful?

WebAssembly Cheat Sheet

Internationalization (i18n) Cheat Sheet

Explore Topics

#FormValidationPatterns#FormValidationPatternsCheatSheet#WebDevelopment#Intermediate#HTML5ValidationAttributes#ConstraintValidationAPI#ReactHookForm#CommonRegexPatterns#APIs#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services