Form validation in Svelte

Introduction

Form validation helps check if the user filled the form correctly before sending it. It stops mistakes and makes sure the data is good.

When you want to check if an email is typed correctly before submitting.

When you need to make sure a password is strong enough.

When you want to confirm that required fields are not empty.

When you want to show helpful messages if the user makes a mistake.

When you want to prevent sending wrong or incomplete data to the server.

Syntax

Svelte

<script>
  let name = '';
  let email = '';
  let errors = {};

  function validate() {
    errors = {};
    if (!name) errors.name = 'Name is required';
    if (!email) errors.email = 'Email is required';
    else if (!email.includes('@')) errors.email = 'Email must include @';
    return Object.keys(errors).length === 0;
  }

  function submitForm() {
    if (validate()) {
      alert('Form is valid!');
    }
  }
</script>

<form on:submit|preventDefault={submitForm} aria-label="User form">
  <label for="name">Name:</label>
  <input id="name" type="text" bind:value={name} aria-describedby="name-error" />
  {#if errors.name}
    <div id="name-error" role="alert" style="color: red;">{errors.name}</div>
  {/if}

  <label for="email">Email:</label>
  <input id="email" type="email" bind:value={email} aria-describedby="email-error" />
  {#if errors.email}
    <div id="email-error" role="alert" style="color: red;">{errors.email}</div>
  {/if}

  <button type="submit">Submit</button>
</form>

Use bind:value to connect input fields to variables.

Use on:submit|preventDefault to handle form submission without page reload.

Examples

Bind the input value to a variable username.

Svelte

<input type="text" bind:value={username} />

Check if email contains '@' and set an error message if not.

Svelte

function validate() {
  if (!email.includes('@')) {
    errors.email = 'Email must include @';
  }
}

Prevent the default form submission and run submitForm instead.

Svelte

<form on:submit|preventDefault={submitForm}>...</form>

Sample Program

This Svelte component shows a simple form with name and email fields. It checks if the fields are filled and if the email contains '@'. If there are errors, it shows messages in red below the inputs. When the form is valid, it shows an alert.

Svelte

<script>
  let name = '';
  let email = '';
  let errors = {};

  function validate() {
    errors = {};
    if (!name) errors.name = 'Name is required';
    if (!email) errors.email = 'Email is required';
    else if (!email.includes('@')) errors.email = 'Email must include @';
    return Object.keys(errors).length === 0;
  }

  function submitForm() {
    if (validate()) {
      alert('Form is valid!');
    }
  }
</script>

<form on:submit|preventDefault={submitForm} aria-label="User form">
  <label for="name">Name:</label>
  <input id="name" type="text" bind:value={name} aria-describedby="name-error" />
  {#if errors.name}
    <div id="name-error" role="alert" style="color: red;">{errors.name}</div>
  {/if}

  <label for="email">Email:</label>
  <input id="email" type="email" bind:value={email} aria-describedby="email-error" />
  {#if errors.email}
    <div id="email-error" role="alert" style="color: red;">{errors.email}</div>
  {/if}

  <button type="submit">Submit</button>
</form>

Important Notes

Always use aria-describedby and role="alert" for error messages to help screen readers.

Use preventDefault to stop page reload on form submit.

Validation can be expanded with more rules as needed.

Summary

Form validation checks user input before sending data.

Svelte uses bind:value to connect inputs to variables.

Show error messages clearly and accessibly for better user experience.

Practice

1. What is the main purpose of form validation in a Svelte application?

easy

A. To check user input before sending data

B. To style the form elements

C. To load data from the server

D. To create new components

Solution

1. Step 1: Understand form validation role

   Form validation ensures user input is correct before submission.

2. Step 2: Identify the correct purpose

   Checking input prevents errors and improves user experience.

3. Final Answer:

   To check user input before sending data -> Option A

4. Quick Check:

   Form validation = check input [OK]

Hint: Validation means checking input before sending [OK]

Common Mistakes:

• Confusing validation with styling
• Thinking validation loads data
• Mixing validation with component creation

2. Which Svelte syntax correctly binds an input's value for validation?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Svelte binding syntax

   Svelte uses bind:value={variable} to bind input values.

2. Step 2: Identify correct syntax

   <input bind:value={name} /> uses correct curly braces and binding keyword.

3. Final Answer:

   <input bind:value={name} /> -> Option B

4. Quick Check:

   bind:value with braces = correct [OK]

Hint: Use bind:value with curly braces for binding [OK]

Common Mistakes:

• Omitting curly braces
• Using colon instead of equals
• Using value= instead of bind:value=

3. What will be the output when submitting this Svelte form if the input is empty?

<script>
  let email = '';
  let error = '';
  function validate() {
    if (!email) {
      error = 'Email is required';
    } else {
      error = '';
    }
  }
</script>

<form on:submit|preventDefault={validate}>
  <input bind:value={email} type="email" />
  <button type="submit">Submit</button>
  <p>{error}</p>
</form>

medium

A. Error message 'Email is required' is shown

B. Form submits with no error message

C. Syntax error prevents form rendering

D. Form reloads the page

Solution

1. Step 1: Analyze validation function

   If email is empty, error is set to 'Email is required'.

2. Step 2: Check form submission behavior

   Submit event is prevented from default, so page does not reload, and error message shows.

3. Final Answer:

   Error message 'Email is required' is shown -> Option A

4. Quick Check:

   Empty input triggers error message [OK]

Hint: Empty input triggers error message display [OK]

Common Mistakes:

• Ignoring preventDefault causing page reload
• Expecting form to submit without error
• Confusing syntax error with logic error

4. Identify the error in this Svelte form validation code:

<script>
  let password = '';
  let error = '';
  function check() {
    if(password.length < 6) {
      error = 'Password too short';
    }
  }
</script>

<form on:submit={check}>
  <input bind:value={password} type="password" />
  <button type="submit">Login</button>
  <p>{error}</p>
</form>

medium

A. Incorrect binding syntax for password

B. Error message variable not declared

C. Missing preventDefault on submit event

D. Password length check uses wrong operator

Solution

1. Step 1: Review submit event handling

   The form's submit event calls check but does not prevent default, so page reloads.

2. Step 2: Identify missing preventDefault

   Without preventDefault, error message disappears on reload, breaking validation UX.

3. Final Answer:

   Missing preventDefault on submit event -> Option C

4. Quick Check:

   Submit needs preventDefault to stop reload [OK]

Hint: Always use preventDefault on form submit to keep validation visible [OK]

Common Mistakes:

• Forgetting preventDefault causes page reload
• Thinking binding syntax is wrong when it is correct
• Assuming error variable is missing

5. How can you improve accessibility when showing validation errors in a Svelte form?

hard

A. Remove labels to reduce clutter

B. Use only color changes to show errors

C. Hide error messages visually but keep them in the DOM

D. Add aria-live="polite" to error message container

Solution

1. Step 1: Understand accessibility for errors

   Screen readers need to be notified of error changes dynamically.

2. Step 2: Use aria-live attribute

   Adding aria-live="polite" tells assistive tech to announce updates politely.

3. Final Answer:

   Add aria-live="polite" to error message container -> Option D

4. Quick Check:

   aria-live improves screen reader announcements [OK]

Hint: Use aria-live for dynamic error announcements [OK]

Common Mistakes:

• Relying only on color changes (not accessible)
• Hiding errors visually removes info from users
• Removing labels harms form clarity