Forms and validation: the form that says why¶

Exercise forms-validation-annex.pdf · PDF

Have you ever filled in a long form, pressed Send, and got it back empty? Or seen "Invalid input", with no clue which input? Which field? What rule? Why now?

A form is the place where the user gives you something. It is the most expensive screen to get wrong, because every failure costs the user's time, twice. And nobody types wrong data for fun. If the form refuses, it owes an explanation.

Passport control¶

Think of passport control. The officer checks your documents before you board, not when you land. A good officer says "your passport expired in March", and you stay at the desk to fix it. A bad one says "no" and sends you to the back of the queue. We keep this officer all page.

Validation is checking that the data meets the rules before using it. An error message is what the officer says when it does not.

The form is the desk. Every rule must answer three questions for the user:

1. Which field?
2. What is wrong?
3. How do I fix it?

"The title needs at least 3 characters." answers all three, in one short sentence. "Invalid input" answers none. This is the clear, brief messaging you saw in Controls, menus and messages, now in code.

These are NoteBox's rules. They are the spec, so the code copies the texts exactly:

Fields tied to state¶

Create a new component for the form, in src/lib/NoteForm.svelte. Its styles come with the full version further down:

<script>
    let { onsave } = $props();

    let title = $state('');
    let body = $state('');
    let tag = $state('none');
    let pinned = $state(false);
</script>

<form>
    <div class="field">
        <label for="title">Title</label>
        <input id="title" type="text" bind:value={title} />
    </div>

    <div class="field">
        <label for="body">Note</label>
        <textarea id="body" rows="4" bind:value={body}></textarea>
        <p class="counter">{body.length} / 280</p>
    </div>

    <div class="field">
        <label for="tag">Tag</label>
        <select id="tag" bind:value={tag}>
            <option value="none">No tag</option>
            <option value="home">Home</option>
            <option value="school">School</option>
            <option value="work">Work</option>
        </select>
    </div>

    <label class="check">
        <input type="checkbox" bind:checked={pinned} />
        Pin this note
    </label>

    <button type="submit">Save note</button>
</form>

Three things to notice:

• bind:value is two-way: typing changes the variable, and changing the variable changes the field. Plain value={title} only writes into the field and never reads back. A checkbox has no useful value, so it uses bind:checked.
• Each <label for="x"> points at the control with id="x". Click the word "Title" and the cursor jumps into the field. A screen reader reads the label when the field gets focus. A placeholder is no substitute: it disappears when you type and is often too pale to read.
• The counter is not state. It is an expression on body.

Now put it on the page. Import it, place it above the search, and delete the old New note button and its .new style:

<script>
    import NoteForm from '#lib/NoteForm.svelte';
    // ...
</script>

<NoteForm onsave={addNote} />

Submit¶

Fill in the form and press Save. What should a form do? By default it sends its data and loads a new page. That is how the web worked in 1995, and in a plain HTML page it still does: a full reload, and everything in memory is gone.

SvelteKit changes what you see, so try it. Its router catches this kind of form, as it catches links, and makes the navigation without a real reload:

Remove those experiments. None of them is what you want, so you take over:

<script>
    // ...
    function submit(event) {
        event.preventDefault();

        onsave({ title: title.trim(), body, tag, pinned });

        title = '';
        body = '';
        tag = 'none';
        pinned = false;
    }
</script>

<form onsubmit={submit}>

event.preventDefault() says: "browser, do not do your usual thing, I will handle it". Then you ring the parent's bell with the data, and empty the fields. .trim() removes spaces at both ends.

On the page's side, addNote now receives the data:

function addNote(data) {
    notes.push({ id: String(Date.now()), ...data });
}

...data spreads the four fields into the new object. Save a note: it appears in the list, and it survives a reload thanks to the effect from Reactivity.

Press Enter inside the title field. It submits too. That is why you listen to the form's submit, not to the button's click.

The browser's own checks¶

Press Save with everything empty: an empty note is created. Now add three attributes to the title input: required minlength="3" maxlength="40". Save again. The browser shows a bubble and refuses. Free validation, zero JavaScript.

Now look for its limits:

These attributes are a fine first line of defence in small forms. For NoteBox you take control: remove them, and add novalidate to the <form> tag, which tells the browser to stay out.

Rules as derived values¶

Is "the title is too short" state? Do you ever set it? No: it is a formula on title. What you learned in Reactivity pays off here: errors are derived.

One object, one message per field. An empty string means "no error".

let errors = $derived({
    title:
        title.trim().length < 3
            ? 'The title needs at least 3 characters.'
            : title.trim().length > 40
                ? 'The title can have at most 40 characters.'
                : '',
    body: body.length > 280 ? 'The note can have at most 280 characters.' : ''
});
let valid = $derived(errors.title === '' && errors.body === '');

If you set errors by hand in a handler, they go stale the moment the user types. Derived, they cannot.

And the gate, as the second line of submit:

function submit(event) {
    event.preventDefault();
    if (!valid) return;
    // ... as before
}

To watch it work, temporarily put <pre>{JSON.stringify(errors, null, 2)}</pre> under the form and type: the object changes at every key. Save with a two-letter title: nothing happens. The rule works. And what does the user know? Nothing. You built a silent officer.

Validation is really two jobs. The rule decides valid or not. The display decides when and where to say it. A rule nobody can see is the same as no rule.

Showing errors well¶

When? If you show errors.title as it is, an empty form opens already shouting in red. Has the user done anything wrong yet? An error before any action is an accusation; rules belong in labels and hints.

So the title error waits for the first Save. The note error appears at once, because the user is already typing past the limit. That takes one new piece of state, submitted.

Where? Under the field, in the danger colour, with the field outlined:

<input
    id="title"
    type="text"
    bind:value={title}
    aria-invalid={submitted && errors.title !== ''}
    aria-describedby="title-error"
/>
<p id="title-error" class="error">{submitted ? errors.title : ''}</p>

Why those attributes? Colour alone is not enough: about 1 in 12 men cannot rely on red, as you saw in Design principles.

aria-invalid tells a screen reader "this field has a problem". aria-describedby tells it which text explains the problem.

You style the red border from aria-invalid, so the look and the meaning can never disagree. And the error line always exists (min-height: 18px): when a message appears, nothing below it jumps.

Here is the whole component, with the <pre> removed:

<script>
    let { onsave } = $props();

    let title = $state('');
    let body = $state('');
    let tag = $state('none');
    let pinned = $state(false);
    let submitted = $state(false);

    let errors = $derived({
        title:
            title.trim().length < 3
                ? 'The title needs at least 3 characters.'
                : title.trim().length > 40
                    ? 'The title can have at most 40 characters.'
                    : '',
        body: body.length > 280 ? 'The note can have at most 280 characters.' : ''
    });
    let valid = $derived(errors.title === '' && errors.body === '');

    function submit(event) {
        event.preventDefault();
        submitted = true;
        if (!valid) return;

        onsave({ title: title.trim(), body, tag, pinned });

        title = '';
        body = '';
        tag = 'none';
        pinned = false;
        submitted = false;
    }
</script>

<form onsubmit={submit} novalidate>
    <div class="field">
        <label for="title">Title</label>
        <input
            id="title"
            type="text"
            bind:value={title}
            aria-invalid={submitted && errors.title !== ''}
            aria-describedby="title-error"
        />
        <p id="title-error" class="error">{submitted ? errors.title : ''}</p>
    </div>

    <div class="field">
        <label for="body">Note</label>
        <textarea
            id="body"
            rows="4"
            bind:value={body}
            aria-invalid={errors.body !== ''}
            aria-describedby="body-error"
        ></textarea>
        <p class={['counter', body.length > 280 && 'over']}>{body.length} / 280</p>
        <p id="body-error" class="error">{errors.body}</p>
    </div>

    <div class="field">
        <label for="tag">Tag</label>
        <select id="tag" bind:value={tag}>
            <option value="none">No tag</option>
            <option value="home">Home</option>
            <option value="school">School</option>
            <option value="work">Work</option>
        </select>
    </div>

    <label class="check">
        <input type="checkbox" bind:checked={pinned} />
        Pin this note
    </label>

    <button type="submit">Save note</button>
</form>

<style>
    form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    label {
        font-size: 14px;
        font-weight: 500;
    }

    input[type='text'],
    textarea,
    select {
        padding: 10px 12px;
        font: inherit;
        border: 1px solid var(--nb-ink);
        border-radius: var(--nb-radius);
    }

    .counter {
        margin: 0;
        font-size: 13px;
        text-align: right;
        color: var(--nb-muted);
    }

    .check {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 400;
    }

    button {
        height: 44px;
        font: inherit;
        font-weight: 500;
        color: var(--nb-paper);
        background: var(--nb-ink);
        border: 0;
        border-radius: var(--nb-radius);
        cursor: pointer;
    }

    :is(input, textarea, select)[aria-invalid='true'] {
        border-color: var(--nb-danger);
        outline: 1px solid var(--nb-danger);
    }

    .error {
        min-height: 18px;
        margin: 0;
        font-size: 13px;
        color: var(--nb-danger);
    }

    .over {
        color: var(--nb-danger);
    }
</style>

flowchart LR
    F["<b>$state</b><br>title, body, tag, pinned"] -->|"formula"| E["<b>$derived</b><br>errors, valid"]
    E -->|"the gate"| S{"<b>submit</b><br>valid?"}
    S -->|"yes"| P["onsave(...)<br>the page keeps the note"]
    S -->|"no"| M["<b>Message</b><br>under the field,<br>with aria-invalid"]
    E -->|"the text"| M

Your turn: blur, a cross-field rule and Clear¶

The handout at the top of this page asks for three things: show the title error when the user leaves the field, add a rule that compares two fields ("A pinned note needs a tag."), and add a Clear button. If you get stuck:

Then build the main form of your own app: at least four fields of three different kinds, at least three rules whose messages answer the three questions, and a cross-field rule if your design has one.

Key takeaways¶

• Validation checks data before you use it. Every error message answers three questions: which field, what is wrong, how to fix it.
• bind:value and bind:checked tie fields to state in both directions. Every field needs a real <label>.
• Listen to the form's onsubmit and call event.preventDefault(): a form's default is to send its data and load a page.
• Browser attributes (required, minlength) are free, but they show one error at a time, in their own words. novalidate turns them off.
• Errors are derived from the fields, never set by hand. The rule decides; the display decides when and where to say it.
• aria-invalid and aria-describedby make errors reachable by assistive technology. Text next to the field says it for everyone. A server must always check again.

Quick check¶

NoteBox now listens and explains, but it still lives in a phone-sized column in the middle of a huge screen. Next you teach it to use the space: Layout with CSS.