Form validation in Svelte - Step-by-Step Execution

Concept Flow - Form validation

User inputs data

↓

Input event triggers validation

↓

Check if input meets rules

↓

Mark valid

↓

Enable submit

↓

User submits form

↓

Process valid data

The form listens to user input, checks if the data is valid, shows errors if not, and enables submission only when all inputs are valid.

Execution Sample

Svelte

let email = '';
let error = '';

function validate() {
  error = email.includes('@') ? '' : 'Invalid email';
}

This code checks if the email contains '@' and sets an error message if not.

Execution Table

Step	email value	Validation condition	error value	Submit enabled
1	'' (empty)	'' includes '@'? False	'Invalid email'	No
2	'userexample.com'	'userexample.com' includes '@'? False	'Invalid email'	No
3	'[e-mail]'	'[e-mail]' includes '@'? True	'' (no error)	Yes
4	User clicks submit	All inputs valid? True	'' (no error)	Yes

💡 Form submission only allowed when validation passes (error is empty).

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
email	''	''	'userexample.com'	'[e-mail]'	'[e-mail]'
error	''	'Invalid email'	'Invalid email'	''	''
submitEnabled	false	false	false	true	true

Key Moments - 2 Insights

Why does the submit button stay disabled even after typing something?

Because the validation checks if the email contains '@'. Until that condition is true (see Step 3 in execution_table), the error remains and submit stays disabled.

What happens if the user fixes the email after an error?

The error message clears (Step 3), and submit becomes enabled. The form reacts immediately to input changes.

Visual Quiz - 3 Questions

Look at the execution_table, what is the error value at Step 2?

A 'Email required'

B '' (no error)

C 'Invalid email'

D 'Email too short'

💡 Hint

Check the 'error value' column at Step 2 in the execution_table.

At which step does the submit button become enabled?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Submit enabled' column in the execution_table.

If the email never contains '@', what will happen to the submit button?

A It will become enabled after some time

B It will stay disabled forever

C It will enable only after clicking submit

D It will show a different error

💡 Hint

Refer to the validation condition and submit enabled columns in the execution_table.

Concept Snapshot

Form validation in Svelte:
- Use variables to track input and error messages.
- Validate input on change (e.g., check if email includes '@').
- Show error messages when invalid.
- Enable submit button only when all inputs are valid.
- Reactivity updates UI instantly.

Full Transcript

Form validation in Svelte works by watching user input and checking if it meets rules like containing '@' for emails. When input changes, validation runs and sets error messages if needed. The submit button is disabled if there are errors. Once input is valid, errors clear and submit enables. This flow ensures users fix mistakes before submitting.