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.