Form validation in Svelte - Mini Project: Build & Apply

Form validation

📖 Scenario: You are building a simple user registration form on a website. The form needs to check that the user enters their name and email correctly before submitting.

🎯 Goal: Create a Svelte component that has a form with name and email input fields. Add validation so the form shows error messages if the name is empty or the email is not valid. The submit button should only be enabled when the form is valid.

📋 What You'll Learn

Create name and email variables to hold input values

Add a validEmail regular expression to check email format

Write a function validateForm that returns true only if name is not empty and email matches validEmail

Bind inputs to variables and disable submit button if validateForm() returns false

Show error messages below inputs when invalid

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Validating user input helps prevent errors and improves user experience.

💼 Career

Knowing how to build forms with validation is a key skill for frontend developers working with modern frameworks like Svelte.

1

Set up form data variables

Create two variables called name and email and set both to empty strings.

Svelte

# Your code here

Hint

Use let to create variables in Svelte.

2

Add email validation pattern

Add a variable called validEmail and set it to the regular expression /^\S+@\S+\.\S+$/ to check email format.

Svelte

let name = "";
let email = "";
# Your code here

Hint

Use const for the regular expression since it won't change.

3

Create form validation function

Write a function called validateForm that returns true only if name is not empty and email matches validEmail. Otherwise, return false.

Svelte

let name = "";
let email = "";
const validEmail = /^\S+@\S+\.\S+$/;

# Your code here

Hint

Use name.trim() !== "" to check name is not empty and validEmail.test(email) to check email.

4

Build form with validation feedback

Create a form with two inputs bound to name and email. Add error messages below each input that show if the input is invalid. Disable the submit button if validateForm() returns false.

Svelte

let name = "";
let email = "";
const validEmail = /^\S+@\S+\.\S+$/;

function validateForm() {
    return name.trim() !== "" && validEmail.test(email);
}

Hint

Use Svelte's bind:value to connect inputs to variables. Use {#if} blocks to show errors. Disable the button with disabled={!validateForm()}.