Leonardo Devai
befab0e70d
Pinned 2026 toolchains (Go 1.26, Rust 1.98/edition 2024, Python 3.14 + uv, Node 24, Zig 0.16, NixOS 26.05), postgres 18 / mongo 8, lockfiles built from, non-root runtimes, .dockerignore, per-project LICENSE, READMEs with the git.devai.io clone line, checkout@v7 CI. Security fixes in the legacy Rust APIs (any-password login, self-assigned admin, hard-coded JWT secret), JWT alg/exp/sub enforcement across the blog series, safe markdown links in the frontends, and many smaller bugs — every project was built, run and exercised end to end. Adds scripts/publish.sh + a CI publish job that splits every folder into its own repo at git.devai.io/templates/<folder>. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01128fhuZbgivaSJvtMf4s1G
60 lines
2.2 KiB
Markdown
60 lines
2.2 KiB
Markdown
# form-validation
|
|
|
|
A sign-up form that checks each field and explains exactly what's wrong, right
|
|
under the field that's wrong. It teaches form events, a readable regex, and how
|
|
to give feedback that screen readers announce too.
|
|
|
|
## Run
|
|
|
|
Get it: `git clone https://git.devai.io/templates/form-validation.git`
|
|
|
|
Double-click `index.html` — it opens in your browser and works. Nothing to
|
|
install, no build step.
|
|
|
|
Or serve it like production:
|
|
|
|
```sh
|
|
docker compose up --build
|
|
```
|
|
|
|
Then open http://localhost:8080.
|
|
|
|
## How it works
|
|
|
|
Each field is described once, in the `fields` object: its input, its error
|
|
`<p>`, and a `validate(value)` rule that returns an error message, or `""` when
|
|
the value is fine. One function, `checkField`, runs a rule and shows the result.
|
|
|
|
- **On blur** (leaving a field) just that field is checked — early feedback
|
|
without nagging while you type.
|
|
- **On submit** every field is checked so all errors appear at once, then the
|
|
cursor jumps to the first one to fix. `preventDefault()` stops the form from
|
|
being sent; this demo only validates.
|
|
- **Accessibility:** `aria-invalid="true"` marks a wrong field, and each input's
|
|
`aria-describedby` points at its error `<p>`, so screen readers read the
|
|
message aloud.
|
|
- `novalidate` on the `<form>` turns off the browser's own popups so ours show
|
|
instead. The email rule is deliberately simple: `something@something.something`.
|
|
|
|
Try it: require a digit in the password (`&& /\d/.test(value)`), add a "terms"
|
|
checkbox that must be ticked, or disable the button until every field passes.
|
|
|
|
## Layout
|
|
|
|
```
|
|
index.html the form: each input followed by its (empty) error <p>
|
|
app.js the fields object, checkField() and the two event listeners
|
|
styles.css the look — invalid fields get a red border
|
|
```
|
|
|
|
## Deploy
|
|
|
|
Push to your own GitHub repo and the shipped workflow
|
|
(`.github/workflows/ci.yml`) tests the compose stack, publishes the image to
|
|
GHCR, and — once you set the `DEPLOY_HOST` / `DEPLOY_USER` variables and
|
|
`DEPLOY_KEY` secret — deploys it to your server over ssh.
|
|
|
|
---
|
|
Part of [devai.io](https://devai.io) — the Web Basics track: HTML, CSS &
|
|
JavaScript, one concept at a time. Next up:
|
|
[faq-accordion](https://git.devai.io/templates/faq-accordion).
|